Radio Button
Radio Button
Radio buttons allow users to select exactly one option from a set. Use them when all options need to be visible for comparison.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Circle Size | 20px × 20px |
| Border Width | 2px |
| Border Color | #3f51b5 (default) |
| Inner Dot | 10px diameter |
| Label Gap | 10px |
| Label Font | 14px Poppins Regular |
States
Section titled “States”Empty circle with border, default state
Circle with filled inner dot, selected state
Reduced opacity, no interaction allowed
Layout
Section titled “Layout”Default layout, 3-5 options stacked vertically
For 2-3 short options arranged horizontally
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Users can select only one option
- 2-5 mutually exclusive options
- All options should be visible
- Need to compare options side-by-side
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Use at least 2 radio buttons in a group | Use for more than 5 options (use dropdown) |
| Provide clear, concise labels | Use for single binary choice (use switch) |
| Order options logically | Stack too many options vertically |
| Include a default selection when appropriate | Hide options in collapsed sections |
When to Use Alternatives
Section titled “When to Use Alternatives”| Scenario | Alternative Component |
|---|---|
| Multiple selections | Checkbox |
| 5+ options | Dropdown/Select |
| Binary toggle | Switch |
| On/off state | Toggle button |