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 GuidelinesFigma ComponentAnatomy
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.
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.
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
Specifications
Padding
Styling
