Adobe Logo

Spectrum

Version 6.2.1

Radio button

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.

Table of contents#

Anatomy#

Image illustrating through labels the component parts of a radio button in an unselected and selected state. Both radio buttons featured a label text on the right side of their radio button.

Options#

Key example of checkbox labels and standalone radio buttons. Four radio buttons are grouped in two sets. The first set of two radio buttons feature a label text on the right side of the radio button. The second set does not feature a label text on the right side.

Label#

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.

Key example of the emphasis option for radio buttons. Two radio buttons in gray are grouped together under the label "not emphasized". Two radio buttons on the right are grouped together under the label "emphasized". The selected radio button features a wider outline in blue. The unselected radio button is gray.

Emphasis#

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.

Key example of a disabled radio button group. Two radio buttons are colored in a light gray color. The first radio button is selected.

Disabled#

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.

Key example of read-only radio buttons. Label, Label. Radio button shows visual change when moused over, but text can still be selected.

Read-only#

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.

Table of options#

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.

PropertyValuesDefault 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

Behaviors#

Radio button with placeholder label, not selected, in focus.

Keyboard focus#

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.

Key example of the text overflow behavior for radio buttons. A selected and emphasized radio button is placed on the left of a long radio button label text. The long text breaks into a new line and is flushed-left at the same column as the first word of the label.

Text overflow#

When the label is too long for the horizontal space available, it wraps to form another line.

Key example of the mixed value behavior for radio buttons. For the radio button group "size" the three radio buttons small, medium and large are unselected.

Mixed value#

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.

Usage guidelines#

Emphasized or not?#

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.

Key example showing correct usage of emphasized radio buttons. The first radio button group for selecting a size features three radio buttons, first one is selected with a wider outline in blue show the emphasized option. The second radio button group shows two radio buttons in the not emphasized option inside an application panel. The second radio button is selected in gray to select the scrolling to vertical in the panel.

Use radio buttons for mutually exclusive options#

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).

Key example showing the correct usage for radio buttons. Three radio buttons with the label "small", "medium" and "large" select the size. The first radio button is selected.

Label groups of radio buttons#

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.

Key example showing the correct usage of label groups of radio button. The three radio buttons "Homepage", "Gallery" and "Contact us" are label with the text "Landing page". The first radio button is selected.
Key example showing the incorrect usage of label groups of radio button. The three radio buttons "Tomorrow", "In 3 days" and "Next week" are missing a label group. The first radio button is selected.

Internationalization#

Key example showing three radio buttons in the right-to-left language use case. The radio buttons are placed on the right side of the radio button labels.

RTL#

For RTL (right-to-left) languages, the layout of radio buttons is mirrored. The radio is placed on the right side of the text.

Keyboard interactions#

KEYINTERACTION
TabTabbing 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.
SpaceSelects the radio button in focus (if not already selected).
Left, Right, Up, and Down ArrowMoves 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.

Changelog#

DateNumberNotes
Apr 13, 20206.2.1
  • Updated keyboard focus state to be more accessible
Feb 26, 20206.2.0
  • Added read-only option
Aug 22, 20196.1.0
  • Added text overflow behavior
Jul 31, 20196.0.0
  • Replaced “standard/quiet” variants with emphasis (“emphasized/not emphasized”)
Apr 20, 20195.0.0
  • This component is now individually versioned (individual versions of existing components start at 5.0.0)
  • Added RTL (right-to-left) guidelines

Design checklist#

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Multiple options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Defined behaviors

Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don’ts that highlight best practices and common mistakes.

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.

Generated UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.