Radio button

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

Design

Up to date

React

Up to date

Usage

When to use radio buttons

In forms –– Radio buttons can be used in forms, both on full-page or in the side panels.

In settings –– Use radio buttons to allow the user to switch the settings in a menu, on a page, or in a component.

Lists selections –– Use radio buttons to let the user choose a singular item within data tables or lists.

When to avoid radio buttons

Use checkboxes instead of radio buttons if the user can select more than one option. Radio buttons are used to select only one item in a set, while checkboxes are used to select unlimited options at once.

If there are more than five options to choose from, use Select instead of the Radio buttons to deliver users a better experience with a less overwhelmed UI.

Formatting

Anatomy

A radio button consists of clickable inputs (circles) with text labels located 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.

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

Radio button label –– The label informs about the select options. This information can be visually supported by an image icon.

Alignment

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

You can choose a horizontal or vertical layout for grouped radio buttons, depending on the use case and the UI structure. However, the vertical arrangement is preferred for better readability.

Composition

Group title (optional)

When necessary, complement a set of radio buttons with a heading to provide further context or clarification.

A group title can either state the category of the grouping or explain what to select.

Write the title in sentence case.

When a set of radio buttons is a part of a component with a title, it's unnecessary to add a title for the radio button group.

Even though you decide the title isn't necessary for the interface, it is always needed in code.

Radio button labels

The copy is clear and concise. Aim for 3 words maximum. If you’re lacking space, try to reword the label. Do not truncate radio button label text with an ellipsis.

The label explicitly says what effect the selection has.

Place the label to the right of the radio button inputs.

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.

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.