Components · Form Controls

Radio Group

Lets people choose one option from a short list.

Automated a11y scan passing Element: <fieldset> + <input type="radio">

Component Workbench

Switch between the live interactive preview, syntax-highlighted implementation code, copyable AI coding agent prompt, and designer anatomy blueprint.

Radio Group · Canonical Spec
Deployment Canary Strategy

When to use it

Do

  • Show all the options, and name the group.
  • Preselect a sensible default when you can.

Don't

  • Use it for long lists. Use Select instead.
  • Use it when several options can be chosen. Use Checkbox instead.

Accessibility & Keyboard Interaction

Requirements for using this component accessibly, following the W3C ARIA Authoring Practices Guide.

Interaction / KeyBehavior & Compliance Requirement
Arrow KeysMoves selection and focus between radios in the group.
Fieldset & LegendGrouped via <fieldset> and labeled by <legend>.

Tokens

Values update with the current theme.

RoleTokenCurrent value
Selected Dot--as-semantic-color-interactive-primary
Circle Radius--as-radius-full
Esc
↑↓ navigateEnter openEsc close