1. States

Checkboxes are either unselected or selected. The checkbox can have an additional, "indeterminate" state if they they use a hierarchical structure. Clicking on a checkbox in an indeterminate state sets the state of that checkbox, and all other controls affected by it, to the "selected" state.

2. Checkboxes vs Dropdowns

Use Checkboxes over Multi-select Dropdowns where space permits. This allows all options to be visible to the user, who can easily compare them.¹

3. Positive and Active

Use positive and active wording for checkbox labels, so that it's clear what will happen if the user turns on the checkbox. Avoid negations which would mean that the user would have to check the box in order for something not to happen. Opt-in scenarios should also be unchecked by default.¹

4. Click area

Users should be able to select an option by clicking on the Checkbox or the label associated with it. A larger target area helps prevent user error and allows them to quickly execute their tasks.¹

5. Disabled States

Use default disabled styling on Checkboxes and don’t change the opacity to indicate a disabled state.²