Adobe Logo

Spectrum

Version 4.0.0

Radio group

A radio group is a grouping of radio buttons that are related to each other.

Example of a radio group with description and error text. Required radio group, label Size. 3 radio buttons, labels Small, Medium, Large. Description and error text, select a product size.

Table of contents#

Anatomy#

Diagram showing the component parts of a radio group, including its field label, radio button area, and help text.

Options#

Key example showing a radio group with a field label. Field label, Size. 3 radio buttons, labels Small, Medium, Large.

Label#

Radio groups should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. These radio groups without a visible label should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”).

Key example of 2 radio groups showing label position. First example, with top label directly above the radio button area. Field label, Size. 3 radio buttons, labels Small, Medium, Large. Second example, with side label to the left of the field button area. Field label, Size. 3 radio buttons, labels Small, Medium, Large.

Label position#

Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. Side labels are most useful when vertical space is limited.

Key example of 2 radio groups showing vertical and horizontal orientation. First example, vertical orientation. 2 radio buttons stacked vertically. Field label, Size. 2 radio buttons, labels Small, Medium. Second example, horizontal orientation. 2 radio buttons placed horizontally. Field label, Size. 2 radio buttons, labels Small, Medium.

Orientation#

Radio groups can be either horizontal or vertical. By default, radio groups are vertical. Use a horizontal radio group when vertical space is limited.

Two examples of radio group sizing. First example, size small. Field label, Size. 3 radio buttons, labels Small, Medium, Large. Help text, Select a product size. Second example, size extra-large. Field label, Size. 3 radio buttons, labels Small, Medium, Large. Help text, Select a product size.

Size#

Radio groups come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.

The field label, radio buttons, and help text all conform to the same sizing option.

Key example of 2 radio groups showing emphasis options. First example, not emphasized. Field label, Size. 2 radio buttons, labels Small, Medium. Small is selected, shown in grey. Second example, emphasized. Field label, Size. 2 radio buttons, labels Small, Medium. Small is selected, shown in blue.

Emphasis#

By default, radio buttons are not emphasized (gray). This option is best 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 best for forms, settings, lists or grids of assets, and other situations where a radio button needs to be noticed.

Key example of 3 radio groups showing required or optional marks. First example, optional. Field label, Size (Optional). 3 radio buttons, labels Small, Medium, Large. Description, Select a product size. Second example, required. Field label, Size (Required). 3 radio buttons, labels Small, Medium, Large. Description, Select a product size. Third example, required. Field label, Size. Label includes an asterisk icon. 3 radio buttons, labels Small, Medium, Large. Description, Select a product size.

Required or optional#

Radio groups can be marked as optional or required, depending on the situation. For required radio groups, there are two styling options: a “(required)” label or an asterisk. If you use an asterisk, be sure to include help text to explain what the asterisk means. Optional radio groups are either denoted with text added to the end of the label — “(optional)” — or have no indication at all.

The asterisk used in this component is an icon that has specific spacing from the label text — not part of the label text itself.

Key example of a radio group showing an error. Required field label, Size. 3 radio buttons, labels Small, Medium, Large. Error message in red with error icon, text Select a product size.

Error#

Radio groups can be marked as having an error to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid. The error is indicated with negative help text, along with an icon.

Key example of a radio group in a disabled state. Required field label, Size. 3 radio buttons, labels Small, Medium, Large. Description text in grey, Select a product size. Radio group is faded in grey color to show that it can’t be interacted with.

Disabled#

A radio group 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. The field label, radio buttons, and help text are all displayed in a disabled state when the radio group is disabled.

Key example of a read-only radio group, with three radio buttons stacked vertically. Radio group label, Size. Radio button labels, Small, Medium, Large. Small is selected. The last radio button, label Large, shows an arrow cursor hovering over and highlighting the label text in blue, to copy it.

Read-only#

A radio group has a read-only option for when it's in the disabled state but still needs to be shown. This allows for content to be copied, but not interacted with or changed.

2 key examples of radio groups showing help text. First example, required field label, Size. 3 radio buttons, labels Small, Medium, Large. Description text in grey, Select a product size. Second example, required field label, Size. 3 radio buttons, labels Small, Medium, Large. Error message in red text with error icon, Select a product size.

Help text (description and error message)#

Radio groups should use help text for error messaging and descriptions. Descriptions are valuable for giving context behind why a selection is required, or for clarifying the options.

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
-
label position
top / side
top
orientation
horizontal / vertical
vertical
size
small / medium / large / extra-large
medium
is emphasized
yes / no
no
necessity indicator
text / icon / nothing
icon
is required
yes / no
no
is error
yes / no
no
is disabled
yes / no
no
is read-only
yes / no
no
error message
text / nothing
nothing
description
text / nothing
nothing

Composition#

Key example showing the composition of a radio group. The radio button area is located between the field label and the help text.

Radio button area#

This area is reserved for radio buttons that represent the selection options for the radio group.

Behaviors#

Key example of the keyboard focus behavior for radio buttons. 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 a radio button's 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, Label Size, there are three radio buttons labels Small, Medium, Large. All 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.

Key example of radio in Windows “high contrast black” theme with label “Radio button”, selected radio with label “Selected radio button”, and disabled radio with label “Disabled radio button”.

Windows high contrast mode#

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.

Radio button (Windows high contrast mode) UI kit

Usage guidelines#

Emphasized or not?#

Emphasized radio buttons are best for forms, settings, and other scenarios where the radio buttons need to be noticed.

Not emphasized radio buttons are best 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 multiple options at once (or no options).

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.
Key example of incorrect usage of radio buttons. A radio button group, label Interests, includes 3 radio buttons, labels Travel, Music, Shopping. These options would be better shown as a checkbox group.

Always label radio groups#

Radio groups 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. Write the label in sentence case.

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 how a radio group appears in Arabic, with UI mirrored. Required radio group, label Size. 3 radio buttons, labels Small, Medium, Large. Help text description, Select a product size.

RTL#

For RTL (right-to-left) languages, the layout of the radio group (and its components) is mirrored. The radio buttons and icons are placed on the right side of the text, and text is aligned to the right.

Keyboard interactions#

KeyInteraction
Up or down arrowMoves selection to previous or next radio button in the radio group. Selection loops when the last or first radio button is reached.

Theming#

A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes. For more information, view Theming.

Key example showing a radio group in Spectrum for Adobe Express theme. 3 radio buttons, labels Small, Medium, Large. Small is selected.

Spectrum for Adobe Express#

Radio groups in Spectrum for Adobe Express have indigo accents. They are slightly larger compared to the default Spectrum radio groups.

Changelog#

DateNumberNotes
Feb 24, 20234.0.0
  • Updated read-only option design
Sep 13, 20223.0.1
  • Updated disabled text color (from gray-500 to gray-400)
Apr 06, 20223.0.0
  • Updated all colors to 6.0.0
Feb 07, 20222.0.0
  • Updated read-only option design
Oct 18, 20211.0.0
  • This component has been added to the website
  • Updated documentation for Radio button to Radio group

Design checklist#

All interactive states

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

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

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Content design

UI language and information design considerations have been incorporated into component design.

Defined options

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

Defined behaviors

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

Usage guidelines

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

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

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 available as design tokens.

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.