Radio

Accessibility

Radio and RadioGroup from @prepared911/ui/radio implement the WAI-ARIA Radio Group pattern via Radix. The primitive handles group semantics, roving focus, and selection; your job is to label the group, label each option, and expose validation when required.

What the component handles

Role assignment. Group container → role="radiogroup"; options → role="radio" with aria-checked.
Keyboard navigation. Arrow keys move between radios; Enter/Space activate.
Disabled state. Disabled radios expose aria-disabled and are skipped in arrow navigation.
Label association. Visible labels pair via htmlFor + id per option.

What you must provide

Group label. Pass label on RadioGroup (renders aria-labelledby) or provide an aria-label. Without it, rotor navigation announces an unnamed radio group.
Readable option labels. Short, parallel phrases ("Light", "Dark", "System"). Avoid question-mark phrasing; the group label already sets the question.
Required and invalid state. Use aria-required, aria-invalid, and aria-errormessage with the associated error text.

Keyboard behavior

Tab moves focus into the group (lands on the selected radio or first if none).
Arrow Up / Down / Left / Right moves the selection between radios.
Home / End move to the first / last radio.
Tab moves focus away from the group.

Semantics and roles

role="radiogroup" on the container; role="radio" per option.
aria-checked reflects selection; only one radio in a group reports aria-checked="true" at a time.

Validation

Known caveats

Radios outside a group. Don't render a lone radio; it breaks the single-selection contract. Use a Checkbox or a Switch instead.
Color-only selected signal. Selected state must include a filled dot or a distinctive indicator beyond color.

Radio / API and Development

Radio Cards / Usage

On this page

What the component handles

What you must provide

Radio

Accessibility

What the component handles

Role assignment. Group container → role="radiogroup"; options → role="radio" with aria-checked.
Keyboard navigation. Arrow keys move between radios; Enter/Space activate.
Disabled state. Disabled radios expose aria-disabled and are skipped in arrow navigation.
Label association. Visible labels pair via htmlFor + id per option.

What you must provide

Group label. Pass label on RadioGroup (renders aria-labelledby) or provide an aria-label. Without it, rotor navigation announces an unnamed radio group.
Readable option labels. Short, parallel phrases ("Light", "Dark", "System"). Avoid question-mark phrasing; the group label already sets the question.
Required and invalid state. Use aria-required, aria-invalid, and aria-errormessage with the associated error text.

Keyboard behavior

Tab moves focus into the group (lands on the selected radio or first if none).
Arrow Up / Down / Left / Right moves the selection between radios.
Home / End move to the first / last radio.
Tab moves focus away from the group.

Semantics and roles

role="radiogroup" on the container; role="radio" per option.
aria-checked reflects selection; only one radio in a group reports aria-checked="true" at a time.

Validation

Known caveats

Radios outside a group. Don't render a lone radio; it breaks the single-selection contract. Use a Checkbox or a Switch instead.
Color-only selected signal. Selected state must include a filled dot or a distinctive indicator beyond color.

Radio / API and Development

Radio Cards / Usage

On this page

What the component handles

What you must provide