Components

Checkboxes

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 visual example in non-selected state
checkboxes visual example in selected state

Using checkboxes

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.

Designing

checkboxes design properties

Checkbox
Checkboxes make the selection visually distinct.

Checkbox label
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' check icon icon to distinguish the checkbox following visually separated states in selected or unselected mode (e.g. disabled, hover, active):

checkboxes visual design and states

Types

Indeterminate

In addition to selected and unselected, a checkbox can be in indeterminate state. This state uses the 'subtract' subtract icon icon.

checkboxes visual example in indeterminate selected state

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.[1]

Coding

See OOUI's demos section of checkboxes.

References

  1. MDN: <input type="checkbox"> Indeterminate state checkboxes