Overview

• Use when there is a list of two or more options that are mutually exclusive AND the user must select exactly one choice.
• Both the label and the button should be clickable.
• When the options are minimal, use radio buttons rather than a Select component because of the lower cognitive load.
• Avoid using for binary choices. Instead, consider a Checkbox, Toggle or Chip group.
• When vertical space is not at a premium, consider using a Selection card instead of a Radio button group.

 

Content

• Use positive and active wording so that it's clear what will happen
• Sentence case
• Keep it as short as possible (1-5 words) and easy to scan

List

• Make sure options are distinct (no overlap between options) but closely related (same type of item)
• If 2 options are similar, make sure you clearly highlight the difference, e.g.:
• Send only the New Hire Onboarding package
• Send New Hire Onboarding package and a link to download the app
• Focus on making it easy to scan. Use the same structure, such as {{noun}} or {{verb}} + {{noun}}
• Make options similar in length
• Keep it as short as possible, but up to 50-75 characters is acceptable
• Keep in mind what happens if none of the options listed apply. If it’s unclear what they should choose in that case, add an “other” option.

 

Common options (optional)

• Use Other to let users select that none of the other options apply
• Use All of the above to let users select that all the options in the list apply/are correct

 

Placement

• Lay out lists vertically, one choice per line
• Left-align options with the prompt

 

Grouping

Use body bold for the prompt or question. Left-align any follow-up questions with the radio button label.

 

 

Padding

Radio button list items should have 20px top and bottom padding.

Error handling

The text alert appears under the question. Unlike checkboxes, individual radio buttons can not have errors because they are always grouped.

 

Best practices

Disabled state

Avoid using disabled state, when possible, as it can create confusion (ex: Why can’t I choose this option!!!) Instead, use text to explain why options are limited. When disabled states are necessary, add explanatory text, similar to the example below.

 

Selection

• User can select an option by clicking on either the radio button itself or its label.
• When selection is mandatory, use asterisk (*) at the end of text and disable any save/submit/next buttons until a selection is made

 

Choosing a default selection

Default: Yes (most common)

In many instances, choosing a default selection for the user helps them move faster when it aligns to the most common answer.

 

Default: No (more rare)

Sometimes, choosing an option for the user is detrimental to the experience. You’re in this situation when there is no clear item to pre-select.

 

Resources

(internal only)

Figma

Storybook

Enhancements

 

Related components

Examples