Checkbox

Enables users to pick multiple options from a group.

GuidelinesReact

When to use

  • To present multiple options that can each be selected.
  • To offer help or error handling for simple settings.
  • For changes that require confirmation after selection.

When not to use

  • When only one of multiple options can be selected—use a radio.
  • You want to group multiple options together into a single basic choice—use a choice group.
  • For single on/off settings with an instant response—use a switch.

Component status

Figma

React

iOS

Android

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

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.

A checkbox with additional info with a link to descriptions.

Don't

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

A checkbox with a very, very long paragraph of description as additional info.

Content

Write positive labels

In addition to writing positively in general, you should especially focus on positive labels for checkboxes. Focus on what happens when the checkbox is selected. Don’t use the selected state for turning off features.

Do

Allow notifications
Receive emails with personalized offers
Passport has no expiration

Don't

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’re offering filters for transport options, types of notifications to receive, or additional services to purchase, always present options using the same structure.

Do

Plane, Bus, Train
Trip deals, Newsletter, Booking information
Cabin bag, Checked bag, Special meal

Don't

Fly, Drive, Train
Trip deals, Get our newsletter, Get booking info in your inbox
Cabin bag, Checked bag, Choose what you want to eat