Inputs
Radio button
Single choice from a short list. Concentric ring and dot, with a 44px halo for touch.
Examples
States
Anatomy
Radio button anatomy| # | Part | Description | Presence |
|---|
| 1 | Ring | 24 / 20 / 16px | Required |
|---|
| 2 | Dot | 10 / 8 / 6px | Required |
|---|
| 3 | Halo | 44px touch boundary | Required |
|---|
| 4 | Label | Clickable text | Required |
|---|
Specifications
| Large | 24px ring · 10px dot |
|---|
| Medium | 20px ring · 8px dot |
|---|
| Small | 16px ring · 6px dot |
|---|
| Touch target | 44px accessible boundary |
|---|
| Themes | Primary indigo · Secondary purple · Success emerald · Warning amber · Error red · Info blue |
|---|
Interaction
Keyboard| Key | Result |
|---|
| Tab | Moves into the group, landing on the selected radio (or the first) |
|---|
| ↑ ↓ ← → | Moves selection to the next or previous radio |
|---|
| Space | Selects the focused radio if none is selected |
|---|
Pointer and touch| Trigger | Response |
|---|
| Click on label | Selects |
|---|
| Hover | Ring strengthens |
|---|
| Press | Dot grows from 0 in 150ms |
|---|
Accessibility
role · radiogroup
1.3.1Info and Relationships1.4.11Non-text Contrast2.1.1Keyboard4.1.2Name, Role, Value
Requirements| Requirement | How Rig meets it |
|---|
| Native inputs | <input type="radio"> sharing one name gives arrow-key behaviour for free |
|---|
| Group name | <fieldset> and <legend> announce the question |
|---|
| Default | Preselect the safest or most common option |
|---|
| Disabled option | Explain why in the label |
|---|
Read the matching WAI pattern ↗
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Use for 2 to 7 mutually exclusive options | ✕Do not use for more than 7 options (use Select) |
| ✓Show all options at once | ✕Do not allow zero selection after the first choice |