Developer mode
Opens components on the React tab by default.
Your bookmarks

Radio

Enables users to pick exactly one option from a group.

With all of the choices that go into planning a trip, decision fatigue can overtake even the most seasoned traveler. Simplify the process for your users by presenting them with clear, well-defined choices.

Radios make it clear that only one option in a form can be selected. Make sure you add enough context so users have everything they need to make an informed decision.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

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

Guidelines

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 follow progressive disclosure. This means using text links and tooltips to keep info hidden but close by.

  # Progressive disclosure
Two radio buttons, one of which has additional text with a link to more info.
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.

Use parallel labels

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

Nonstop, Up to 1 stop, Up to 2 stops
Resolved, Waiting for response, Postponed
Vegan, Vegetarian, Pescatarian
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

Related components

Checkbox

Radio buttons allow users to select only one option. Use checkboxes to offer users multiple options or a single on–off option. 

Select

Radio buttons are great for a single choice with multiple options. But if there are too many options, it can overwhelm users. Use a select to help users navigate many options.

ChoiceGroup

If you need to group multiple options together into a single basic choice, use a choice group.