Checkbox

Use in multi-select scenarios when selecting one doesn’t affect any other and when checked = true, unchecked = false.

Overview

Check boxes should be used when the user is presented with a list of more than two options and can select multiple.

Change is not required to be immediate, so check boxes are typically associated with pages requiring a “save” action.

Modifying the selection state of a checkbox should not affect the selection state of another, with two exceptions:

When a checkbox is used to make a bulk selection.

When a checkbox has child options.

Avoid using disabled state, when possible, as it can confuse. Instead, use text to explain why options are limited.

	Radio button	Checkbox (group)	Checkbox (single)	Toggle switch	Segmented control
Number of options	Multiple	Multiple	2 (on/off)	2 (on/off)	2-4
Number of selections	1	0 - all	1	1	1
Default selection	Yes (usually)	No	Yes	Yes	Yes
Relationship of options	Mutually exclusive	Independent	Mutually exclusive	Mutually exclusive	Mutually exclusive
Selection occurs	After confirmation	After confirmation	After confirmation	Immediately	Immediately

Example

Do

Do use when checked represents true, unchecked represents false

Don’t

Don’t use radio buttons for true/false scenarios

Content

Use positive and active wording so that it's clear what will happen if the user chooses a checkbox

Sentence case

For lists, keep it as short as possible (1-5 words) and easy to scan. However, up to 50-75 characters is acceptable for both lists or individual sentences.

Do

Do use positive and active writing, where turning on the checkbox means that something will happen

Don’t

Don’t use negative wording, where turning on the checkbox (doing something) means that something won’t happen

Lists

Make sure options are distinct (no overlap between options) but closely related (same type of item)

Focus on making it easy to scan. Use the same structure, such as {{noun}} or {{verb}} + {{noun}}

Make options similar in length

Keep it as short as possible, but up to 50-75 characters is acceptable

Keep in mind what happens if none of the options listed apply. If it’s unclear what they should choose in that case, add an “other” option.

Do

Do write in bold

Don’t

Don’t mix bold and regular text

Individual sentences

Includes sentences added to confirm specific items (i.e. “I confirm I’ve read the terms and conditions”), as well as all options in Settings.

Max length: 50-75 characters

Ideal: Start with an active verb that clearly states what will happen after checking the checkbox

Acceptable: Phrase as a user affirmation starting with “I {{verb}}”. Do this to highlight user responsibility.

Do

Do start individual sentences with a verb that show what will happen after checking the checkbox.

Don’t

Don’t start with a noun, making it difficult to scan and less clear.

Do

Do keep the user accountable by starting with “I + verb” and phrasing in the positive.

Don’t

Don’t create a long, convoluted sentence that doesn’t start with a verb or “I + verb”.

Placement

Lay out your lists vertically, with one choice per line, spacing 16px apart. If you must use a horizontal layout with multiple options per line, make sure to space the buttons and labels so that it's abundantly clear which choice goes with which label.