Radio

Definition

Use radio buttons when you want someone to select only one option from a few mutually exclusive choices.

Anatomy

Defining shared language for discussing the construction and structure of this component.

Key

Category

Parts

1

Shape

Border radius, border color

2

Text, Label

Font family, size/line height, color

3

Shape

Background color

4

Text, Description

Font family, size/line height, color

Usage

Figma Library (internal only)

HCM library (internal only)

Make the default the first choice if possible.

If choices describe a range of impact to the browsing behavior, order them from the greatest impact to least impact. Do not force the default to the top if it breaks the sequence.

  • Radio buttons present options. They do not initiate an action as a standard button does.
  • Use radio buttons to provide a choice from two to five mutually exclusive options. For example, to offer a choice of how to save downloads.
  • Never use one radio button on its own. If someone is choosing between two states (this or that), consider a checkbox.
  • If someone is choosing between two states and the action will be executed upon selection, consider a toggle.

Variants

Figma Library (internal only)

HCM library (internal only)

Acorn offers 3 checkbox variants in 1 size, with 5 states across 3 modes (themes).

Sizes

States

A radio can be selected or unselected — this is a visual affordance. In addition, radios have 5 interactive states that affect the visual output.

Available interactive states: Default, hover, active, focus, and disabled.

The focus and disabled states have important caveats that apply across modes.

Focus

:focus states are used for keyboard navigation and sometimes when clicking a focus-able element using a mouse. Focus states are vital for accessibility and may not be omitted.

The CSS pseudo class :focus does not affect visual output in iOS or Android.

Disabled

Disabled visual styles should only be applied when a radio is disabled.

Disabled radios are unusable. Disable a radio to keep users from interacting with the radio until conditions are met.

With description

Figma component (internal only)

HCM component (internal only)

Examples

High contrast mode has different themes. The examples shown below are from Windows 11.

Desert theme

Night Sky theme

With label

Figma component (internal only)

HCM component (internal only)

Examples

High contrast mode has different themes. The examples shown below are from Windows 11.

Desert theme

Night Sky theme

Behavior and interaction

Radios are an interactive element with a binary state: selected or unselected.

Unlike a toggle or checkbox a radio requires more than one radio to be able to change its state from selected to unselected.

When a user clicks an unselected radio the state changes to selected, additional clicks on the same radio will not deselect the radio. To deselect a radio, the user must click on another radio.

The state change involves a color change, and adds a filled dot.

Writing guidelines

  • Write in an active voice for radio button labels.
  • Use sentence case.
  • Give radio buttons meaningful descriptions. Each radio button’s descriptor should clearly describe the effect of choosing it.
  • Maintain parallel construction for lists of related radio button labels.

Use terminal punctuation after radio button labels.

Localization

To pressure test designs, use tools like Google Translate or Transvision to see how design reacts to Chinese, English, and German.

Not sure? Check with #l10n in Slack.

Accessibility

  • Labels should always be clickable — clicking a label should activate the associated radio.
  • Labels should always be to the right of the associated radio.
  • Radio buttons should be contained in radio groups.

Need guidance? Check with #accessibility in Slack.

Changelog

Date

Version

Notes

Mar 01, 2024

1.0.0

Initial draft of radio guidance

Status checklist

All States

Includes all applicable states (hover, focus, disabled, etc...)

All Themes

Works properly across all themes (theme name, theme name, etc...)

All Modes

Works properly across all modes (light, dark, high contrast)

All Desktop Environments

Works properly across all environments (Windows, MacOS, Linux)

All Mobile Environments

Works properly across all environments (iOS, Android)

Overall Accessibility

Has been tested and reviewed by A11y Team.

Color / Accessibility

All color has been tested against and passed all the latest WCAG 2.1 A & AA standards.

Text / Accessibility

All text has been tested against and passed all the latest WCAG 2.1 A & AA standards.

Contrast / Accessibility

All contrast has been tested against and passed all the latest WCAG 2.1 A & AA standards.

Interaction / Accessibility

All interactions have been tested against and passed all the latest WCAG 2.1 A & AA standards.

Content Design Review

Has been tested and reviewed by Content Design Team.

Writing Guidelines

Follows guidance for writing and language use.

Localization

Works properly across locales, and includes guidance for RTL languages.

Defined Behavior

Guidance for behavior when interacted with.

Defined Interactions

Guidance for interaction capabilities, ie. keyboard interactions.

Usage Guidelines

Includes guidance for usage, dos and don'ts, best practices.

Tokens

All attributes are available as tokens.

Figma Library

Has a reusable Figma component.

Storybook

Is documented in Storybook.

Code

Has a code counterpart.

Status

Healthy