Checkbox

Dimensions

 

States

The checkbox allows various states: unselected, selected, and indeterminate. In addition to these states, checkboxes also have a separate state for focus and disability. The default view of a checkbox set is with no option selected.

• Unselected
  In most cases, the unchecked state is a default state. An exception could be made when you need to speed up an obvious flow. For example, when you're saving an influencer to a newly created collection, the collection is immediately checked.
• Indeterminate
  The indeterminate state comes into play when the checkbox contains a sublist of selections. When some items are selected and some not, we use the indeterminate checkbox status.
• Selected
  It's possible to select multiple checkboxes at a time. Once the user chooses another item, the previous choice is stay selected.
• Focus
  The Focus state indicates that an interaction exists. This state is shown on the mouse over checkbox input or label; or on selecting by a keyboard.
• Disabled
  A checkbox in a disabled state indicates that a selection exists but is not available given the circumstances. This can be used to maintain the layout's continuity and communicate that action may become available in the future. A disabled checkbox requires a tooltip explaining why is the option is disabled.

 

Typography

Checkbox group title and label should be written in a sentence case meaning that only the first word in a phrase and any proper noun is capitalized.

 

Interactions

The selection of a checkbox is realized by clicking the checkbox input or clicking the checkbox label. This way it's easier for the user to make the selection.

 

Target zone

All interactive targets should take up at least 24×24 CSS pixels of space to ensure that they are big enough and that there’s sufficient space between them. This makes it less likely that a user will accidentally activate the wrong control. White space around the target can also be included.

 

Parent and child checkboxes

Checkboxes can have a parent-child relationship with other checkboxes.

They follow these rules

• When the parent checkbox is checked, all child checkboxes are checked.
• If a parent checkbox is unchecked, all child checkboxes are unchecked.
• If some, but not all, child checkboxes are checked, the parent checkbox is in an indeterminate state.
• If the parent checkbox is in the indeterminate state and the user clicks it, all the child checkboxes are selected. After a second click, all the child checkboxes are deselected.

Example

• https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F1hEITxP1I5Tw8pjtU4ALuto7EzjFoZJwl%2Fslidercontrols-parent-child-v03.mp4

 

References

• Target Size – Minimum (Level AA) –– https://wcag.com/developers/2-5-8-target-size-minimum-level-aa/