Radio

Enables users to pick exactly one option from a group.

GuidelinesReact

When to use

  • To present a few options where only one can be selected.

When not to use

  • When you have many options—use a select.
  • When multiple options can be selected—use a checkbox.
  • For single on/off settings with an instant response—use a switch.
  • You want to group multiple options together into a single basic choice—use a choice group.

Component status

Figma

React

iOS

Android

Released
Released
Released
Released

Content structure

Label: works best when short; radio controller: indicates the state and can be selected or not; info text: adds more explanation to the label and can contain a link.

Behavior

Support progressive disclosure

While it makes sense to provide users with the information they need to make a good choice, providing them with too much information at once actually makes it harder to decide.

So while you might be tempted to stuff everything into labels and additional info, you should try to use progressive disclosure. This means using text links and tooltips to keep info hidden but close by.

Do

Present only absolutely necessary information with interactions to offer more.

Two radio buttons, one of which has additional text with a link to more info.

Don't

Don’t overwhelm users with too much information at once.

Two radio buttons, one of which has a very long paragraph of additional text.

Show multiple options, but not too many

Radios force users to choose only one option. Make sure they’re always presented with two or more options. If you have many options to choose from, consider using a select to decrease the initial cognitive load on users.

Content

Use parallel labels

Whether you’re offering filters for transport options, statuses for requests, or types of special meals, always present options using the same structure.

Do

Nonstop, Up to 1 stop, Up to 2 stops
Resolved, Waiting for response, Postponed
Vegan, Vegetarian, Pescatarian

Don't

Nonstop, 1 stop or fewer, Up to 2 stops
Resolved, I’m waiting for a response, We’re not doing this now
Vegan, A meal without meat, It can include fish