Radio
A radio allows users to select exactly one option from a set.
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.
Styles
Section titled “Styles”A radio allows users to select exactly one option from a set.
<label class="tng-radio-control"> <input type="radio" name="delivery" checked /> <span>Home delivery</span></label><label class="tng-radio-control"> <input type="radio" name="delivery" /> <span>Click and collect</span></label>Elements
Section titled “Elements”Grouping
Section titled “Grouping”Group related radios in a <fieldset> with a <legend> so assistive technology announces the group context.
<fieldset class="tng-stack"> <legend class="tng-text-title is-8 mb-xl"> Contact preference </legend> <label class="tng-radio-control"> <input type="radio" name="contact" checked /> <span>Email</span> </label> <label class="tng-radio-control"> <input type="radio" name="contact" /> <span>SMS</span> </label></fieldset><label class="tng-radio-control is-sm"> <input name="size" type="radio" /> <span>Small</span></label><label class="tng-radio-control is-lg"> <input name="size" type="radio" /> <span>Large</span></label>States
Section titled “States”Disabled
Section titled “Disabled”<label class="tng-radio-control"> <input type="radio" name="state" disabled /> <span>Disabled</span></label><label class="tng-radio-control"> <input type="radio" name="state" checked disabled /> <span>Selected and disabled</span></label>For designers
Section titled “For designers”- 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 developers
Section titled “For developers”To ensure the radio button meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:
- 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 theforattribute 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.
- Use a native
- 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.
- 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.
- Screen Reader Support
- The radio button label must clearly describe the option or action it represents.
- Use
aria-describedbywhen 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.
- Interaction Feedback
- The selected state must be communicated via the native
checkedattribute. - 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.
- The selected state must be communicated via the native
- 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.
Semantic markup
Section titled “Semantic markup”Use native <input type="radio"> elements with a shared name value for each group. Wrap each input in a <label> to keep the full row clickable.
Keyboard interaction
Section titled “Keyboard interaction”- Tab moves focus to the selected radio in a group.
- Arrow keys move selection between options in the same group.
- Space selects the currently focused option.
- Focus visibility is handled by the
tng-focus-withinutility.
| 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 |
Group labels and descriptions
Section titled “Group labels and descriptions”Each radio group needs a visible label via <legend>. If helper or error text is present, connect it with aria-describedby.