Radio

Examples

Sizes

Figma size sets: Sm 16px · Md 20px.

States

Interaction states from Figma: Default, Hover, Focus, Disabled, Read-only — across Unchecked and Checked.

Validation

Figma Validation=Invalid (Negative) — use validation="error". Unchecked uses a light negative fill; checked uses solid negative.

Radio with Label

RadioOption is Figma Radio.Option — label required, optional description.

Option Group — Vertical

Option Group — Horizontal

Controlled

TanStack Form

Submit without a selection to see validation. Choosing a plan and submitting again succeeds.

RTL

Wrap the control (or a parent) in dir="rtl" / lang="fa". Option labels and descriptions align to the inline-start edge.

API Reference

Radio

RadioOption

RadioOptionGroup

Accessibility

WCAG success criteria

Why it matters

Radio groups force a single choice — billing plans, shipping methods, consent levels. When the group is unnamed, arrow keys do nothing useful, or focus disappears after selection, users cannot complete forms without a mouse. Screen-reader users need the group name, the selected option, and only one checked item announced reliably. Getting radiogroup semantics wrong is one of the most common 4.1.2 failures in product audits.

Keyboard

Arrow keys operate within the group only; Tab moves between groups and other controls. Only one radio per group may be selected at a time.

Screen readers & semantics

For 4.1.2 Name, Role, Value, verify three things in audits: the radiogroup has a name, each radio has a name, and the checked state updates when arrow keys or Space change selection.

Focus & visuals

• Focus ring: :focus-visible on each radio draws a 2px gap + 2px stroke outside the circle via ::after, using --eds-color-outline-primary (overridable with --eds-component-radio-focus-ring).
• Roving focus: Base UI keeps DOM focus on the active radio while arrow keys move selection — the focus ring follows the current choice.
• Contrast: Selected fill and dot use semantic tokens; error (validation="error") states use negative tokens for 3:1 non-text contrast against adjacent backgrounds.
• Target size: RadioOption expands the clickable region via its <label>; bare radios should sit in layouts with adequate spacing or an associated label.
• RTL: Options lay out with logical properties; arrow keys follow document reading order (inline axis), so ←/→ still move between options correctly in dir="rtl".

Build with it

Do

• Always wrap options in RadioOptionGroup — a lone Radio still needs a group ancestor for roving focus and radiogroup semantics.
• Name the group with aria-label or aria-labelledby before shipping.
• Set name on RadioOptionGroup for native form posts and assistive tech grouping.
• Pass inputRef on the group (or option) when TanStack Form needs to focus the field after validation failure.
• Apply validation="error" to options and render descriptive error copy with role="alert".
• Use readOnly (not disabled) when the selected value must remain visible and focusable but not changeable.

Don't

• Render multiple independent <Radio /> elements without a RadioOptionGroup — arrow keys and radiogroup naming will break.
• Rely on legend text alone without wiring aria-labelledby to the group.
• Use separate radio groups for what is logically one question (splits keyboard navigation and confuses screen readers).
• Disable the entire group to show a read-only answer — use readOnly on the group instead.

Quick test

1. Keyboard-only (2 min): Tab into a vertical group; use ↓/↑ to move — only one option stays selected; Space confirms; Tab out reaches the next control.
2. VoiceOver / NVDA (2 min): Confirm the group name is announced on entry; each option reads “radio button, checked/unchecked, N of M”; selection updates when arrows move.
3. 4.1.2 spot check (1 min): Inspect the DOM — one radiogroup with an accessible name, each option a radio with its own name, exactly one aria-checked="true".
4. Form error (1 min): Submit the TanStack Form demo empty — error text appears, options show error styling, refocus lands on the field when using inputRef.
5. RTL (30 sec): Set dir="rtl" on a horizontal group — labels align inline-start and arrow keys still move between options in reading order.