Radio

Radios allow the user to select a single choice from a a list of two or more options that are mutually exclusive.

Overview

Resources

Changelog

Source code

Ember

Storybook

Figma

Variations

Individual radio

Use when radios are not grouped together under a group label. A single radio should never appear alone.

Radio group

Use the radio group when radio items are exclusive to each other and closely related. Radio group is typically used under a group label, which can be added using the text component.

Usage

Best practices

When grouped, radios should be in some logical order that makes it easy for the user to read and understand, whether that is numerical or alphabetical or some other contextually-based grouping.
Multiple radios should always be displayed vertically, even if not in a grouping. An exception to this rule would be two radios with extremely short labels, such as “yes” and “no” options.
Radio groupings are perfect for 10 or less options. If there are more to choose from, use a dropdown instead.

Content guidelines

Radio labels should be clearly written, in sentence case and avoiding punctuation at the end.

✅ DO

Create a campaign * Add a contact * Start a conversation * Read my report

🚫 DON’T

Create A Campaign. * Add A Contact. * Start A Conversation. * Read My Report.

Accessibility

Keyboard support

Move focus to each radio using the tab key, or shift + tab to move backwards
To interact with the radio when it has keyboard focus, press the space key

Similar components

Checkbox

Allows users to select one or more items from a set.

Dropdown

Allows users to select an option from a dropdown menu.