When to Use
Example: payment method
- Selecting exactly one option from a small set of mutually exclusive choices (2–7 items)
- When all available options should be visible at once for quick comparison
- Form fields like gender, payment method, or priority level
- Use Checkbox for multi-select, Switch for instant on/off toggles, or Selector for long lists
Usage Guidelines
DO
Use for mutually exclusive selection (only one can be selected). Provide a sensible default selection
Don’t
Don't use Radio for multi-select — use Checkbox instead
DO
Use Radio for 2–7 options; arrange vertically for readability
Don’t
Don't use Radio as a toggle — use Switch instead. Don't require a selection without a default value — increases cognitive load
Accessibility
| Requirement | Implementation |
|---|---|
| Semantic element | Radix UI @radix-ui/react-radio-group, native role="radiogroup" |
| Label association | htmlFor + id |
| Keyboard navigation | ↑↓ / ←→ navigate within group; Tab switches between groups |
| Group label | aria-label or aria-labelledby for the entire group |