Example: payment method
Use for mutually exclusive selection (only one can be selected). Provide a sensible default selection
Don't use Radio for multi-select — use Checkbox instead
Use Radio for 2–7 options; arrange vertically for readability
Don't use Radio as a toggle — use Switch instead. Don't require a selection without a default value — increases cognitive load
| 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 |