> For the complete documentation index, see [llms.txt](https://docs.devlaunchers.org/dl-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devlaunchers.org/dl-docs/universal-design-system/universal-design-system/components/uds-components/input/radio.md). # Radio ### **Overview:** The Radio Button component allows users to select **one option** from a group of mutually exclusive choices. It provides clear visual feedback for selection, interaction, and error states, and is designed for structured form inputs and data collection workflows. *** ### Usage Guidelines: Use radio buttons when users must choose **exactly one option** from a predefined set. **When to use** * Selection between 2–7 mutually exclusive options * Form inputs where one value must be chosen * Settings or configurations requiring a single choice **When not to use** * Independent or multi-select choices (use Checkbox) * Binary yes/no choices (use Checkbox instead) * Long or unbounded option lists (use Select) **Best practices** * Always present radio buttons in clearly labeled groups * Ensure only one radio button in a group can be selected * Use vertical alignment for readability when possible * **Use `alert` style only to indicate validation errors** *** ### Component Properties: #### `status` (enum) **Options:** `default`, `hover`, `focus`, `active`\ **Purpose:** Controls interaction state and visual feedback.\ **Usage:** Automatically managed through user interaction.\ **Context:** Ensures clarity for pointer and keyboard users. *** #### `size` (enum) **Options:** `sm`, `base`, `lg`\ **Purpose:** Determines the scale of the radio button.\ **Usage:** * `sm` → compact or dense layouts * `base` → standard form usage * `lg` → high-visibility or touch-friendly contexts\ **Context:** Scales the radio circle, inner dot, and focus ring consistently. *** #### `is-selected` (boolean) **Purpose:** Indicates whether the radio button is selected.\ **Usage:** * Only one radio button in a group may be `true`\ **Context:** Must be synchronized with group state and form data. *** #### `style` (enum) **Options:** `grey`, `cta`, `alert`\ **Purpose:** Controls visual treatment and semantic meaning.\ **Usage:** * `grey` → default, neutral selections * `cta` → emphasized or primary choice * `alert` → **error state only**\ **Context:**\ For radio buttons, `alert` is reserved exclusively for validation errors and must not be used for emphasis or branding. *** #### `is-disabled` (boolean) **Purpose:** Controls whether the radio button is interactive.\ **Usage:** * `true` → non-interactive, muted appearance * `false` → fully interactive\ **Context:** Maintains layout while preventing selection. *** ### Appearance Modes: Supports the following variable collections: #### **theme** * Adapts colors, borders, and fills for light and dark themes * Maintains WCAG-compliant contrast in all states * Error (`alert`) styling remains clearly distinguishable in both themes *** #### **size** * Controls physical dimensions of the radio circle and inner dot * Ensures consistent alignment with surrounding typography * Supports `sm`, `base`, and `lg` *** #### **status** * **default:** Resting state * **hover:** Pointer feedback * **focus:** Keyboard focus ring * **active:** Pressed interaction state *** #### **is-disabled** * **false:** Standard interactive appearance * **true:** Reduced opacity and muted tokens > ℹ️ `alert` style may be combined with `theme`, `size`, and `status`, but is semantically reserved for error states only. *** ### Nested Components: No nested components *** ### ♿ Accessibility Considerations: * **Contrast:**\ Meets WCAG AA across all themes, sizes, and states * **Keyboard navigation:** * `Tab` to enter the radio group * Arrow keys to move between options * `Space` to select * **Screen reader support:** * Proper `role="radiogroup"` and `role="radio"` usage * Announces selected state and option labels * Group context communicated via labels or legends * **Semantic tags:** * Implemented using `` * Grouped with shared `name` attribute * Wrapped in `
` and `` when appropriate *** ### 🧠 Developer Notes: * Maps directly to native HTML radio inputs * Mutual exclusivity enforced via shared `name` * `style="alert"` should be applied only by validation logic * Error states should include: * `aria-invalid="true"` * Associated error message via `aria-describedby` * Theme and size are presentational and do not affect semantics *** ### Known Issues: **No known issues.** *** ### Reference Links: * WCAG 2.1 – Radio Button Accessibility * ARIA Authoring Practices – Radio Group Pattern * Dev Launchers Design Tokens (Color, Spacing, Radius) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.devlaunchers.org/dl-docs/universal-design-system/universal-design-system/components/uds-components/input/radio.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.