Radio button card

Use a radio button card when the user can choose a single option from a list of mutually exclusive choices. Only one radio button card can be selected at a time. By default, one radio button card is preselected. When the user selects another option, the previous selection is automatically deselected.

Design

Up to date

React

Up to date

Resources

Figma component

Created with Figma

Storybook

Usage

When to use the radio button card

Use the radio button card to present information more prominently and clearly explain all the available options to users.

In forms — Radio button cards can be used in forms on the full page and on side panels.

List selections — Use radio buttons to let users choose a singular item within a list.

When to avoid radio button cards

If the user can select multiple options, use Checkboxes instead of Radio button cards. Radio button cards allow users to choose only one option in a set, while checkboxes allow users to select unlimited options at once.

If there are more than five options to choose from, use Select instead of Radio button cards to deliver a better user experience with a less cluttered UI.

Formatting

Anatomy

A radio button consists of clickable inputs (circles) with text labels to their right. If there is a group of radio buttons, you can add a group title.

Group title (optional) –– The title describes the options or provides guidance for choosing the best option.

Container –– The container frames the radio button card and, at the same time, indicates the state of the component (e.g. selected, error, hover, etc.).

Radio button input –– The radio button input indicates the selection state. By default, one of the options is preselected.

Label and description — The label informs about the selectable options. An image icon can visually support this information, and a description can enhance it if an explanation is needed.

Helper (optional) –– Use a helper if you need to add additional information about the option that cannot be placed in the description, such as a part of the product documentation.

Alignment

Radio button labels are positioned to the right of the inputs.

Depending on the use case and the UI structure, you can choose a horizontal or vertical layout for radio button cards. However, the vertical arrangement is recommended for better readability.

Overflow content

Long labels may wrap to a second line; avoid truncation.

The text should wrap beneath the radio button. The radio button input and the label should be top-aligned.

In a horizontal layout, containers should be the same height, regardless of whether the content in some of them is shorter.

References

Nielsen, J. (2004, September 26). Checkboxes vs. Radio Buttons. Nielsen Norman Group. Retrieved January 11, 2022.

Pernice, K. (2014, June 1). Radio Buttons: Select One by Default or Leave All Unselected. Nielsen Norman Group. Retrieved January 11, 2022.

Radio button. (2021, January 6). Carbon Design System. Retrieved January 11, 2022.

Soul Design System by Emplifi

Soul is the heart of Emplifi's effort to design the best CX platform for its customers. The design system collects principles, components, patterns, copywriting guidelines, and more.