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

Checkbox

Enables users to pick multiple options 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.

Checkboxes make it clear that multiple options 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
Sketch
Released

Content structure

Label: works best when short; checkbox controller: indicates the state, which can be selected or not; info text: adds more explanation to the label and can contain a link, usually "learn more" or similar.

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
A checkbox with additional info with a link to descriptions.
A checkbox with a very, very long paragraph of description as additional info.

Write positive labels

In addition to writing positively in general, you should especially focus on positive labels for checkboxes. Focus on what will happen when the checkbox is selected. Do not use the selected state for turning off features.

Allow notifications
Receive emails with personalized offers
Passport has no expiration
Turn notifications off
Select to opt out of emails with personalized offers
I need to enter dates for my passport expiration

Use parallel labels

Whether you are offering filters for transport options, types of notifications to receive, or additional services to purchase, always present options using the same structure.

Plane, Bus, Train
Trip deals, Newsletter, Booking information
Cabin bag, Checked bag, Special meal
Fly, Drive, Train
Trip deals, Get our newsletter, Get booking info in your inbox
Cabin bag, Checked bag, Choose what you want to eat

Related components

Radio

Checkboxes offer users multiple options or a single on–off option. Use radio buttons to present options where users can only select one from a group.

ChoiceGroup

Checkboxes can work for options when they’re on their own. If you need to group multiple options together into a single basic choice, use a choice group.