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

Demo and Developer Guidelines Figma Component

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.
‍
Character count limit: 60
‍
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.