Radio Button

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)

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

• 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

Size : Small by State

Radio button

Border radius: 0

.item/radiobutton

State: Default

Radio button label

Text color:

buttons-radio-button-neutral-rested-foreground-color#333333

buttons-radio-button-neutral-rested-foreground-color#282830

Text style: Body/7-default

Hover

.item/radiobutton

State: Hover

Radio button label

Text color:

buttons-radio-button-neutral-hover-foreground-color#333333

buttons-radio-button-neutral-hover-foreground-color#282830

Text style: Body/7-default

Selected

.item/radiobutton

State: Selected

Radio button label

Text color:

buttons-radio-button-neutral-active-foreground-color#000000

buttons-radio-button-neutral-active-foreground-color#15151b

Text style: Body/7-default

Disabled

.item/radiobutton

State: Disabled

Radio button label

Text color:

buttons-radio-button-neutral-disabled-foreground-color#4d4d4d

buttons-radio-button-neutral-disabled-foreground-color#6c7073

Text style: Body/7-default

Disabled Selected

.item/radiobutton

State: Disabled Selected

Radio button label

Text color:

buttons-radio-button-neutral-disabled-foreground-color#4d4d4d

buttons-radio-button-neutral-disabled-foreground-color#6c7073

Text style: Body/7-default

Focus

Radio button

Border color:

color-border-focus-neutral-default#0072f0

color-border-focus-neutral-default#0072f0

Border weight: 2

Border radius: 2

Radio button

Size: Small

Size : Large by State

Radio button

Border radius: 0

.item/radiobutton

State: Default

Radio button label

Text color:

buttons-radio-button-neutral-rested-foreground-color#333333

buttons-radio-button-neutral-rested-foreground-color#282830

Text style: Body/6-default

Hover

.item/radiobutton

State: Hover

Radio button label

Text style: Body/6-default

.item/radiobutton : State

Radio button

Border color:

buttons-radio-button-neutral-rested-border-color#a8aaac

buttons-radio-button-neutral-rested-border-color#a8aaac

Border weight: 1

Hover

Radio button

Background color:

buttons-radio-button-neutral-hover-fill-color#e5e3e1

buttons-radio-button-neutral-hover-fill-color#6c7073

Selected

Radio button

Border color:

buttons-radio-button-neutral-active-border-color#000000

buttons-radio-button-neutral-active-border-color#15151b

Background color:

buttons-radio-button-neutral-active-fill-color#4d4d4d

buttons-radio-button-neutral-active-fill-color#000000

Disabled

Radio button

Border color:

buttons-radio-button-neutral-disabled-border-color#e5e3e1

buttons-radio-button-neutral-disabled-border-color#6c7073

Disabled Selected

Radio button

Border color:

buttons-radio-button-neutral-disabled-border-color#e5e3e1

buttons-radio-button-neutral-disabled-border-color#6c7073

Background color:

buttons-radio-button-neutral-disabled-fill-color#f5f5f5

buttons-radio-button-neutral-disabled-fill-color#a8aaac

Styling

Colors

Name	Applied as	Applied to
buttons-radio-button-neutral-rested-border-color	Border color	Radio button (default)
buttons-radio-button-neutral-rested-border-color	Border color	Radio button (default)
buttons-radio-button-neutral-rested-foreground-color	Text color	Label (default)
buttons-radio-button-neutral-rested-foreground-color	Text color	Label (default)
buttons-radio-button-neutral-hover-fill-color	Background color	Radio button (hover)
buttons-radio-button-neutral-hover-fill-color	Background color	Radio button (hover)
buttons-radio-button-neutral-hover-foreground-color	Text color	Label (hover / focus)
buttons-radio-button-neutral-hover-foreground-color	Text color	Label (hover / focus)
buttons-radio-button-neutral-active-border-color	Border color	Radio button (selected)
buttons-radio-button-neutral-active-border-color	Border color	Radio button (selected)
buttons-radio-button-neutral-active-fill-color	Background color	Radio button (selected)
buttons-radio-button-neutral-active-fill-color	Background color	Radio button (selected)
buttons-radio-button-neutral-active-foreground-color	Text color	Label (selected)
buttons-radio-button-neutral-active-foreground-color	Text color	Label (selected)
buttons-radio-button-neutral-disabled-border-color	Border color	Radio button (disabled)
buttons-radio-button-neutral-disabled-border-color	Border color	Radio button (disabled)
buttons-radio-button-neutral-disabled-fill-color	Background color	Radio button (disabled selected)
buttons-radio-button-neutral-disabled-fill-color	Background color	Radio button (disabled selected)
buttons-radio-button-neutral-disabled-foreground-color	Text color	Label (disabled)
buttons-radio-button-neutral-disabled-foreground-color	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

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)

Accessibility

For Design

• All states (default, hover, selected, disabled, focus) must maintain accessible contrast.
• Focus styles must remain visible and meet WCAG AA contrast requirements. Focus should be clearly distinguishable from hover.
• Colour tokens used should be semantic (e.g. foreground/neutral/default) rather than fixed values. This ensures the component adapts correctly to different themes or surfaces.
• The interactive area (radio button + label) must be large enough to support touch accessibility.

For Dev

To ensure the radio button meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:

1. Semantic HTML
   • Use a native <input type="radio"> element. Do not recreate radio buttons using <div> or <span>.
   • The radio button must be associated with a <label> using the for attribute or by wrapping the input inside the label.
   • Avoid adding click handlers to non-semantic elements to toggle the radio button.
   • Wrap the set in a <fieldset> and provide a label using <legend>. This ensures screen readers announce the category before the individual options.
2. Keyboard Navigation
   • The radio button group must be reachable using Tab navigation.
   • Users must be able to move between options using Arrow keys.
   • Do not override default keyboard behaviour unless providing a fully accessible alternative.
3. Focus Ring / Visible Focus
   • The radio button must display a visible focus style when focused via keyboard.
   • The focus indicator must be clearly distinguishable and not rely only on colour.
   • Never remove the browser default focus outline unless replacing it with an accessible equivalent.
   • Focus styles must remain visible even when the radio button is hovered or checked.
4. Screen Reader Support
   • The radio button label must clearly describe the option or action it represents.
   • Use aria-describedby when additional helper text or error messages are present.
   • The checked and unchecked states must be correctly announced by assistive technologies.
   • If the radio button is disabled, ensure the disabled state is conveyed programmatically.
5. Interaction Feedback
   • The selected state must be communicated via the native checked attribute.
   • Visual changes (filled circle, border) should reinforce state changes.
   • Avoid relying solely on colour to indicate selected or unselected status.
   • Error states must be clearly communicated visually and programmatically.
6. Responsive and Tap Targets
   • The interactive area must be at least 44 px in height to support touch accessibility.
   • Ensure sufficient spacing between radio buttons when presented in a list to avoid accidental activation.

Keyboard Navigation

Keys	Actions
Tab	Moves focus into and out of the radio button group
Arrow keys	Moves focus between radio button options
Space	Selects the focused radio button

Usage

Do

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.

Don’t

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.