Checkboxes signal to the user that an option is selectable. They allow for users to select as many or as few checkable options as listed. The checkable option states for the user are selected, unselected or indeterminate.
Checkboxes must feature a descriptive label. Checkboxes may appear alone or as a part of a group. A checkbox may also have sub-components or child checkboxes.
Checkboxes make the selection visually distinct.
Its labels should be short, with text that clearly states what action is selected.
Checkboxes group label (optional)
If 2 or more checkboxes are grouped, it's recommended that the group also carries a clear label.
States of checkboxes
The styles for checkbox states were designed with accessible color variations, additional to the 'check' icon to distinguish the checkbox following visually separated states in selected or unselected mode (e.g. disabled, hover, active):
In addition to selected and unselected, a checkbox can be in indeterminate state. This state uses the 'subtract' icon.
The most common is when a checkbox is available that "owns" a number of sub-options (which are also checkboxes). If all of the sub-options are checked, the owning checkbox is also checked, and if they're all unchecked, the owning checkbox is unchecked. If any one or more of the sub-options have a different state than the others, the owning checkbox is in the indeterminate state.