Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.
Radio buttons should always have labels. When the label is not defined, a radio button becomes standalone. Standalone radio buttons are only used when their connection to other components is clear and they give sufficient context — for example, in a form to rate between 1 to 10 for several categories.
By default, radio buttons are not emphasized (gray). This version is optimal for when the radio button is not the core part of an interface, such as in application panels, where all visual components are monochrome in order to direct focus to the content.
The emphasized (blue) version provides a visual prominence that is optimal for forms, settings, lists or grids of assets, and other situations where a radio button need to be noticed.
A radio button in a disabled state shows that a selection exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that an action may become available later.
Radio buttons have a read-only option for when they’re in the disabled state but still need their labels to be shown. This allows for content to be copied, but not interacted with or changed.
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.
Property | Values | Default Value |
---|---|---|
label | text / nothing When the label is not defined, the radio button appears as a standalone radio button. | – |
is selected | yes / no | no |
is emphasized | yes / no | no |
is disabled | yes / no | no |
is read-only | yes / no | no |
A radio button can be navigated using a keyboard. The keyboard focus state takes the radio button’s visual hover state and adds a blue ring to the radio button in focus.
When the label is too long for the horizontal space available, it wraps to form another line.
When a radio button group presents multiple values that are not identical, the group should not show a selection. Any subsequent selection should update all values.
In Windows high contrast mode, radio buttons should be displayed using the high contrast theme-specified colors for buttons. By default, borders should be same as the button text color and labels should use default text color. In hover and keyboard focus states, a border should display as the button border color. Selected radio fill should be the same as button border color. In the disabled state, border and text color should display as the disabled color.
Emphasized radio buttons are optimal for forms, settings, and other scenarios where the radio buttons need to be noticed. Not emphasized radio buttons are optimal for application panels where all the visual components are monochrome in order to direct focus to the canvas.
Radio buttons and checkboxes are not interchangeable. Radio buttons are best used for selecting a single option from a list of mutually exclusive options. Checkboxes are best used for selecting as many options as desired (or none).
Groups of radio buttons should always have a label that clearly describes what the list of options represents. This is important for accessibility, since a screen reader will read the label before each option. Make sure to include a label, and don't assume that the options are self-explanatory without one.
For RTL (right-to-left) languages, the layout of radio buttons is mirrored. The radio is placed on the right side of the text.
KEY | INTERACTION |
---|---|
Tab | Tabbing into a group of radio buttons places the focus on the first radio button selected. If none of the radio buttons are selected, the focus is set on the first one in the group. |
Space | Selects the radio button in focus (if not already selected). |
Left, Right, Up, and Down Arrow | Moves focus and selection to the previous or next radio button in the group (last becomes first, and first becomes last). The new radio button in focus gets selected even if the previous one was not. |
Date | Number | Notes |
---|---|---|
Apr 13, 2020 | 6.2.1 |
|
Feb 26, 2020 | 6.2.0 |
|
Aug 22, 2019 | 6.1.0 |
|
Jul 31, 2019 | 6.0.0 |
|
Apr 20, 2019 | 5.0.0 |
|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
Component is included in the Spectrum for Adobe XD plugin.