All States
Includes all applicable states (hover, focus, disabled, etc...)
Use radio buttons when you want someone to select only one option from a few mutually exclusive choices.
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 |
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.
Figma Library (internal only)
HCM library (internal only)
Acorn offers 3 checkbox variants in 1 size, with 5 states across 3 modes (themes).
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.
Figma component (internal only)
HCM component (internal only)
High contrast mode has different themes. The examples shown below are from Windows 11.
Desert theme
Night Sky theme
Figma component (internal only)
HCM component (internal only)
High contrast mode has different themes. The examples shown below are from Windows 11.
Desert theme
Night Sky theme
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.
Use terminal punctuation after radio button labels.
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.
Need guidance? Check with #accessibility in Slack.
Date |
Version |
Notes |
---|---|---|
Mar 01, 2024 |
1.0.0 |
Initial draft of radio guidance |
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