Form Elements
Radio Button
Radio Button presents a list of mutually exclusive options where users can make exactly one selection from the group.
Examples
Small, 16px
Medium, 20px
Large, 24px
AccessibilityWCAG 2.1 Level AA Compliant
Features8 checks
- Minimum 20x20px touch target (WCAG 2.5.5)
- 2px focus ring with 2px offset for keyboard navigation (WCAG 2.4.7)
- Color contrast ratios meet 3:1 for UI components (WCAG 1.4.11)
- Does not rely on color alone (visual fill indicator)
- Semantic HTML input with type="radio"
- Proper label associations
- RadioGroup uses role="radiogroup"
- Arrow key navigation between radio options
When to use this component
✓Do's
- •Mutually exclusive selection from 2–5 visible options
- •When users need to see all options at once
- •Form fields where comparison between options matters
✗Don'ts
- •For a list with more than five options, use a Select.
- •For selecting multiple options, use Checkboxes.
- •For simple on/off settings, use a Switch.
- •For searching and selecting from a large list, use an Autocomplete.
Do's and Don'ts
✓ Do's
Processing Type
Use Radio for 2-5 mutually exclusive options where users need to compare choices.
✗ Don'ts
Don't hide 2-3 options in a dropdown, Radio buttons let users compare all options at once.
✓ Do's
Payment Method
Pre-select the most common option to reduce form completion time by 12% (Formisimo research).
✗ Don'ts
Payment Method
Don't use Radio for 6+ options, it takes too much vertical space. Use Select instead.