| Table of Contents |
|---|
| Status | ||||
|---|---|---|---|---|
|
...
for a list where the user can select multiple options, including all, some, or none.
as a single checkbox which the user can check or uncheck it, for example to show agreement.
A checkbox has 3 modes: unselected, selected, and partially selected. The partially selected state comes into play when the checkbox contains a sub-list of selections, some of which are selected, and some unselected.
...
For each of these modes, the different states below can apply:
...
Interaction
Clicking a checkbox toggles between the ‘checked' and ‘unchecked’ modes.
For checkboxes in the partially selected state, clicking them will move them to the 'checked' state and check all of its child checkboxes. An additional click will uncheck the master checkbox and all its child checkboxes.
Within a group of checkboxes, each checkbox can be checked or unchecked independently. The user can check multiple options.
Users should be able to select the checkbox by clicking on the box directly or by clicking on its label.
The checkbox can be selected by clicking on either the checkbox or the label.
The checkbox will have a hovered state when hovering over either the checkbox or the label.
The checkbox will have an active state during the action of clicking either the checkbox or the label.
The partially selected state is visual only and indicates that some, but not all, of the child checkboxes are checked. This state can’t be achieved by a direct user interaction on the checkbox itself.
...