Checkbox
We use checkboxes to provide users with the ability to either select or deselect multiple values from a list of options (e.g. items on list pages), or to select or deselect a single option (e.g. settings on configure pages).

Anatomy
For every checkbox type, there is always both a checkbox and a label describing what the user is selecting or not selecting.

Label
All checkbox labels are written in sentence case without punctuation unless it’s a proper noun or a user-inputted label.
The content format of checkbox labels will vary depending on the use case, but labels in similar lists should be written using a parallel structure.
The content format of checkbox labels will vary depending on the use case, but labels in similar lists should be written using a parallel structure.

Correct

Incorrect
All labels are either plural OR singular nouns, but not both in a single list.
Settings and configuration checkbox labels are written sentence case without punctuation unless it’s a proper noun or a user-inputted label, as a command, and they start with a verb.

Correct

Incorrect
Do not write settings checkbox labels as a question.

Correct

Incorrect
Do not write settings checkbox labels as an indicative statement.
If there is an empty state for a single checkbox item, the label will read “No”. More details can be found on the Form Empty State page.
Types
Selected & Unselected
Selected and unselected checkboxes are the most common types, and they can be used in a list of options or as a standalone checkbox.

Selected

Unselected
Indeterminate
We use indeterminate checkboxes when a child of a checkbox group is selected, and we want to show, at the parent level, that a selection has been made. This type of checkbox is only used when the user can select from a list of options.

Disabled selected & Disabled unselected
Disabled selected and disabled unselected are not editable in the user’s current view. This type can be used for a checkbox in list of options or as a standalone checkbox.

Disabled selected

Disabled unselected
Error
Selected and unselected checkboxes with error styling are used for when an item selection is required in a checkbox list.

Selected

Unselected
Behavior
Here are some best practices we recommend for using checkboxes:
Can use when there are more than two options to select from.

Use checkboxes when multiple items can be selected not when option are mutually exclusive.

Correct

Incorrect
Selections made using checkboxes will require a Save/Apply action.

Specifications
Padding

Styling

