Radio button card

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

Component checklist

Design

Up to date

React

Up to date

Resources

 

Usage

When to use the radio button card

Use the radio button card to provide additional and more visually prominent information to explain to users all the options to select.

  • In forms — The radio button cards can be used in forms on the full page and on the side panels.
  • List selections — Use radio buttons to let users choose a singular item within lists.

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 users a better experience with a less overwhelmed 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.

Usage - Anatomy
  1. Group title (optional) –– The title describes the options or provides guidance for choosing the best option.
  2. Container –– The container frame radio button card and, at the same time, indicates the state of the component such as selected, error, hover, etc.
  3. Radio button input –– The radio button input indicates the selection state. By default, one of the options is preselected.
  4. Label and description — The label informs about the select options. An image icon can visually support this information, and a description can enhance it if an explanation is needed.
  5. 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 example.

Alignment

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

Usage - Alignment

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 preferred for better readability.

 

Overflow content

Usage - Overflow
  • 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.