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).
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d03c220f2b18f60b4386_checkbox_intro.png)
Anatomy
For every checkbox type, there is always both a checkbox and a label describing what the user is selecting or not selecting.
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d067125cb83564d71e81_checkbox_anatomy.png)
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.
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/60e76bf8755ac2b4a4936a3f_checkbox_correct_1.png)
Correct
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d5fa9e35c152a182ec71_checkbox_incorrect_1.png)
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.
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/60552eece6ed4ef6074fefab_checkbox_correct_2.png)
Correct
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d6063df2522780018b25_checkbox_incorrect_2.png)
Incorrect
Do not write settings checkbox labels as a question.
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/60552f02427ced299423efae_checkbox_correct_3.png)
Correct
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d60fbe4e6985c6a95932_checkbox_incorrect_3.png)
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.
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/5f8f650bc2dd2a1023fc61dd_checkbox_types_selected.png)
Selected
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d75e9f5270159bfdfb79_checkbox_types_unselected.png)
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.
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d77b51c1e317712b3c38_checkbox_types_indeterminate.png)
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.
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6287cdc28823cc1218da0d50_checkbox_types_dis_selected.png)
Disabled selected
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d7e99581c7bfb47f5a3c_checkbox_types_dis_unselected.png)
Disabled unselected
Error
Selected and unselected checkboxes with error styling are used for when an item selection is required in a checkbox list.
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d7fd94159501711b74ea_checkbox_types_error_selected.png)
Selected
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d808ad189862f5e3c99c_checkbox_types_error_unselected.png)
Unselected
Behavior
Here are some best practices we recommend for using checkboxes:
Can use when there are more than two options to select from.
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d8817470bdc1843efbb6_checkbox_behavior.png)
Use checkboxes when multiple items can be selected not when option are mutually exclusive.
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/61e1da2fabd595ddb35749ea_cb_behavior_correct.png)
Correct
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d891a705dbd9e846df04_checkbox_behavior_correct.png)
Incorrect
Selections made using checkboxes will require a Save/Apply action.
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d8a8e204e016445876ee_checkbox_behavior_2.png)
Specifications
Padding
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d9a3ad18983b5fe3d16f_checkbox_padding.png)
Styling
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6273d9af5ac01d65d179a94a_checkbox_styling_1.png)
![](https://cdn.prod.website-files.com/5f5298baab4c43a7f0640b67/6287cde6dda64d81d5f16bb6_checkbox_styling_2.png)