Skip to main content

Radio

A radio button is an interactive element that allows users to select a single option from a predefined set of choices.

Dos and Don’ts

Do
  • Use radio buttons when the user must pick exactly one option from a list.
  • Write labels in plain, concise language that makes each option clearly distinct.
Don't
  • Don't use radio buttons for yes/no questions where a toggle or checkbox fits better.
  • Don't use radio buttons when the user can pick more than one option (use checkboxes instead).

Anatomy

Anatomy of the radio button component.
  1. Radio button: A Radio Button input indicating the appropriate state. By default it is unselected.
  2. Label (Optional): Describes the item you want to select or unselect.

Variants

Default

Default state of the radio button component.

Modifiers

Label

The radio button can be used with or without a label. When a label is used, it should be concise and clearly describe the option.

Label modifier of the radio button component.

Alignment

If there is a Radio Button grouping, they can be laid out vertically or horizontally depending on the use case. When possible, arrange the Radio Button group vertically for easier reading.

A group of radio buttons with label stacked vertically.
A group of radio buttons with label stacked horizontally.

Content

Radio Button labels

  • Always use clear and concise labels for Radio Buttons.
  • Be explicit about the results that will follow if the Radio Button is selected.

Overflow

  • If you are tight on space, consider rewording the label.
  • Long labels may wrap to a second line, and this is preferable to truncation. Text should wrap beneath the Radio Button so the control and label are top aligned.
Radio button component with overflowing label text.

Interactions

If the Radio has a label, the label is clickable for easier interaction.

A radio button with a clickable label.
A radio button without a clickable label.

States

The Radio Button input allows for two states: unselected and selected. The default view of a set of Radio Buttons is having an option selected.

A radio button in an unselected state.
A radio button in a selected state.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

A radio button in the default state.

Active

A radio button in an active state.

Error

A radio button in an error state.

Disabled

A radio button in a disabled state.

LTR Examples

Here are some examples of Radio in LTR context:

A radio button stacked vertically in an LTR context.
A radio button stacked horizontally in an LTR context.

RTL Examples

Here are some examples of Radio in RTL context:

A radio button stacked vertically in an RTL context.
A radio button stacked horizontally in an RTL context.
Back to top