How to build an accessible Radio in React

Each Radio is a native <input type="radio"> wrapped in a <label>, and RadioGroup applies role="radiogroup" with a shared name so the browser provides roving arrow-key navigation, single-selection, and label association for free.

When to use a Radio

• Choosing exactly one option from a small, mutually exclusive set (roughly 2–6) where all options should stay visible
• Form fields where the choices need plain text labels and a familiar radio affordance

When not to use it

• Selecting one of many options where showing them all is impractical — use Select
• Each option needs a title plus description or richer layout — use RadioCard
• A compact inline switch between a few views or modes — use SegmentedControl

Keyboard interactions

Role radio, verified at WCAG 2.2-AA.

• ArrowUp
• ArrowDown
• ArrowLeft
• ArrowRight
• Space

Common mistakes

Avoid: Multiple <Checkbox> where only one may be selected

Prefer: <RadioGroup name="plan"><Radio value="pro" label="Pro" /><Radio value="team" label="Team" /></RadioGroup>

Checkboxes imply multi-select; a radio group communicates and enforces single-choice semantics to assistive tech

Example

<RadioGroup name="plan" defaultValue="pro"><Radio value="pro" label="Pro" /><Radio value="team" label="Team" /></RadioGroup>

See the full Radio reference →