Radio

Anatomy

1. Radio Circle — 24×24 px circular outer ring, 2px border
2. Indicator — Inner dot, visible when selected, color follows the style variant
3. Label — Descriptive text for the option
4. Supporting Text — Optional additional description

Usage Guidelines

Do ✓

• Use for mutually exclusive selection (only one can be selected)
• Provide a sensible default selection
• Use Radio for 2–7 options (switch to Selector for more than 7)
• Arrange vertically for readability

Don't ✗

• Don't use Radio for multi-select — use Checkbox instead
• Don't require a selection without a default value — increases cognitive load
• Don't use Radio as a toggle — use Switch instead

Accessibility