Radio pill

A radio button or radio pill is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.

Interactive demo

This demo lets you preview the Radio pill component.

<CodeViewerExample>
  <Radio
    name="toggle-radio-pill[]"
    onChange={function noRefCheck() {}}
    value="123"
  >
    Label
  </Radio>
</CodeViewerExample>

Usage

Radio pills are an essential element of forms. They are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. Clicking a non-selected radio button will deselect whatever other button was previously selected in the list.

Principles

Familiar

Radio pills have been in user interfaces for a long time and should be used as expected.

Scannable

It should be visible at a glance if a radio pill has been selected, and selected items should be more visually prominent than unselected items.

Efficient

Radio pills make it easy to compare available options.

Alternatives for selection control

If the available options are simply yes/no or on/off, a checkbox is likely a better alternative. If the user experience can be enhanced by adding graphics (such as icons or brands) for the menu, the component Dropdown can be used as an alternative, which employs a custom menu picker. Select can be used as an alternative, which employs the native menu picker of the user device.

Checkbox

A checkbox may be a better option for an on/off-switch.

Select

Select presents the list of options in text with the native menu picker of the user device.

Dropdown

Dropdown offers a custom menu with support for graphics, such as icons or logotypes.

Text labels

Short text labels

To ensure good user-friendliness, you should not use long sentences as a label. Instead, use short, distinct and clear labels.

Do

Short and distinct labels.

Don't

Long and unclear labels.

Formatting

Anatomy

Radio pill consists of the Radio pill itself that may be disabled or enabled. In addition, the Radio pill must contain a label connected to it.

1. Disabled Radio pill
   a. Radio pill (disabled)
   b. Label
2. Enabled Radio pill
   a. Radio pill (enabled)
   b. Label

Radio pill sizing

Radio pill component only has one default size which should always be used unless otherwise specified.

Behavior

Avoid nesting

Avoid nesting radio buttons with other radio buttons or checkboxes. You should keep all options at the same level to avoid confusion.

Do

Keep all options at the same level

Don't

Use nesting and secondary levels.