Design
Radio buttons allow users to select exactly one option from a list of at least two mutually exclusive choices. Selecting one option automatically deselects the previously selected one.
This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet and desktop — with no alternative versions required.
When to use it (and when not to)
Section titled “When to use it (and when not to)”Use radio buttons when:
- The user must select exactly one option from a small list of mutually exclusive choices (typically 2–5).
- All available options should be visible at a glance for quick comparison.
- You want to provide a clear “recommended” or “current” state by pre-selecting a default option.
Do not use radio buttons when:
- The user needs to select multiple items (use checkboxes).
- The list contains more than 5–6 options (use a dropdown to save space).
- The action is binary “on/off” and takes effect immediately without a submit button (use a toggle switch).
Quick summary of accessibility & consistency
Section titled “Quick summary of accessibility & consistency”- Wrap groups in a
<fieldset>with a<legend>. - Ensure the entire label is clickable to provide a large touch target.
- Maintain consistency by using vertical stacking for better readability.
- Ensure that keyboard navigation (arrow keys) moves focus logically between options.
- High visual contrast and clear “focus rings” are mandatory to support users with low vision or those navigating via keyboard.
Properties
Section titled “Properties”Size : Small by State
Section titled “Size : Small by State”Radio button
Border radius: 0
.item/radiobutton
State: Default
Radio button label
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830 Text style: Body/7-default
Hover
.item/radiobutton
State: Hover
Radio button label
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830 Text style: Body/7-default
Selected
.item/radiobutton
State: Selected
Radio button label
Text color:
color-foreground-neutral-emphasis#000000color-foreground-neutral-emphasis#15151b Text style: Body/7-default
Disabled
.item/radiobutton
State: Disabled
Radio button label
Text color:
color-foreground-neutral-subtle#4d4d4dcolor-foreground-neutral-subtle#6c7073 Text style: Body/7-default
Disabled Selected
.item/radiobutton
State: Disabled Selected
Radio button label
Text color:
color-foreground-neutral-subtle#4d4d4dcolor-foreground-neutral-subtle#6c7073 Text style: Body/7-default
Focus
Radio button
Border color:
color-border-focus-neutral-default#c57046color-border-focus-neutral-default#0072f0 Border weight: 2
Border radius: 2
Radio button
Size: Small
Size : Large by State
Section titled “Size : Large by State”Radio button
Border radius: 0
.item/radiobutton
State: Default
Radio button label
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830 Text style: Body/6-default
Hover
.item/radiobutton
State: Hover
Radio button label
Text style: Body/6-default
.item/radiobutton : State
Section titled “.item/radiobutton : State”Radio button
Border color:
color-border-neutral-muted#999999color-border-neutral-muted#a8aaac Border weight: 1
Hover
Radio button
Background color:
color-fill-neutral-subtle#e5e3e1color-fill-neutral-subtle#6c7073Selected
Radio button
Border color:
color-fill-neutral-emphasis#000000color-fill-neutral-emphasis#000000 Background color:
color-fill-neutral-emphasis#000000color-fill-neutral-emphasis#000000Disabled
Radio button
Border color:
color-border-neutral-subtle#666666color-border-neutral-subtle#6c7073Disabled Selected
Radio button
Border color:
color-border-neutral-subtle#666666color-border-neutral-subtle#6c7073 Background color:
color-foreground-neutral-subtle#4d4d4dcolor-foreground-neutral-subtle#6c7073Styling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
color-border-neutral-muted | Border color | Radio button (default) |
color-border-neutral-muted | Border color | Radio button (default) |
color-foreground-neutral-default | Text color | Label (default) |
color-foreground-neutral-default | Text color | Label (default) |
color-fill-neutral-subtle | Background color | Radio button (hover) |
color-fill-neutral-subtle | Background color | Radio button (hover) |
color-foreground-neutral-default | Text color | Label (hover / focus) |
color-foreground-neutral-default | Text color | Label (hover / focus) |
color-fill-neutral-emphasis | Border color | Radio button (selected) |
color-fill-neutral-emphasis | Border color | Radio button (selected) |
color-fill-neutral-emphasis | Background color | Radio button (selected) |
color-fill-neutral-emphasis | Background color | Radio button (selected) |
color-foreground-neutral-emphasis | Text color | Label (selected) |
color-foreground-neutral-emphasis | Text color | Label (selected) |
color-border-neutral-subtle | Border color | Radio button (disabled) |
color-border-neutral-subtle | Border color | Radio button (disabled) |
color-foreground-neutral-subtle | Background color | Radio button (disabled selected) |
color-foreground-neutral-subtle | Background color | Radio button (disabled selected) |
color-foreground-neutral-subtle | Text color | Label (disabled) |
color-foreground-neutral-subtle | Text color | Label (disabled) |
color-border-focus-neutral-default | Border color | Radio button (focus) |
color-border-focus-neutral-default | Border color | Radio button (focus) |
Text Styles
Section titled “Text Styles”| Name | Applied as | Applied to |
|---|---|---|
Lorem Ipsum typography-body-7 | Text style | Label (small) |
Lorem Ipsum typography-body-7 | Text style | Label (small) |
Lorem Ipsum typography-body-6 | Text style | Label (large) |
Lorem Ipsum typography-body-6 | Text style | Label (large) |
Guidance on how to use a component.
- Use radio buttons when the user must select exactly one option from a list.
- Use radio buttons for mutually exclusive choices.
- Always pre-select a default option when possible.
- Always associate a visible label with the radio button.
- Provide clear visual feedback for selected, unselected, and disabled states.
Guidance on what to avoid when using a component.
- Don’t use radio buttons when the user can select multiple options — use checkboxes instead.
- Don’t use radio buttons when the list contains more than 5–6 options — use a dropdown instead.
- Don’t use radio buttons for binary “on/off” actions that take effect immediately — use a toggle switch instead.
- Don’t recreate radio buttons using
<div>or<span>elements without appropriate ARIA roles. - Don’t rely solely on colour to indicate the selected or unselected state.
- Don’t remove the browser default focus outline unless replacing it with an accessible equivalent.