Radio
Selection control for mutually exclusive choices within a group.
Anatomy
1
2
3
- 1 Field wrapper — groups the indicator and label as a click target
- 2 Indicator — circular control with filled dot when selected
- 3 Label — describes the option
Options
States
Unselected
Default
Hover
Focus
Disabled
Selected
Default
Hover
Focus
Disabled
Table of options
| Property | Values | Default |
|---|---|---|
| label | text | "Option" |
| checked | true / false | false |
| disabled | true / false | false |
| name | text (shared across group) | — |
| value | text | — |
| state | default / hover / active / focus / disabled | default |
Behaviors
Mutual exclusion
Selecting one radio in a group automatically deselects the previously selected option.
Keyboard focus
The focus state adds a visible focus ring around the radio indicator.
Disabled state
A disabled radio cannot be selected. It is removed from the tab order and uses reduced contrast.
Arrow key navigation
Within a radio group, arrow keys move focus and selection between options without leaving the group.
Usage guidelines
Use radios for mutually exclusive choices
Do
Use radios when only one option can be selected from a group.
Don't
Don't use checkboxes for mutually exclusive choices.
Content standards
- Write each option as a distinct, parallel choice.
- Use sentence case.
- Keep labels concise — one line when possible.
- Always provide at least two options in a radio group.
Keyboard interactions
| Key | Interaction |
|---|---|
| Tab | Moves focus into or out of the radio group. |
| ↑ / ← | Moves selection to the previous option, wrapping to the last. |
| ↓ / → | Moves selection to the next option, wrapping to the first. |
| Space | Selects the focused option if not already selected. |
Accessibility
- Use native
<input type="radio">with sharednamefor grouping. - Wrap in a
<fieldset>with a<legend>. - Each radio must have an associated
<label>. - Focus indicators meet 3:1 contrast.
- Selected state uses a filled dot, not color alone.
Theming
Radio adapts automatically across brands and color modes through component tokens. Use the hero preview switches above to see it in action.
For the full theming architecture see Foundations: Theming.
Design checklist
All interactive statesDefault, hover, active, focus, selected, and disabled.
All color themesWorks across light and dark modes.
Accessible use of colorSelected uses filled dot, not color alone (WCAG 1.4.1).
Accessible contrast for textLabel contrast at least 4.5:1 (WCAG 1.4.3).
Accessible contrast for UIBorder contrast at least 3:1 (WCAG 1.4.11).
Content standardsLabel guidelines documented.
Defined optionsChecked, disabled, name, value documented.
Defined behaviorsMutual exclusion, focus, disabled, arrow nav documented.
Usage guidelinesDo/don't for exclusive vs. independent choices.
Keyboard interactionsTab, arrow, Space documented.
Design tokensAll visual attributes as tokens.
Figma componentAvailable in Figma library.