...

Description

Check boxes are used where the user has the option to select or deselect one or more options. It can be used:

...

State	Unchecked	Checked	Partially selected
Regular
Hover
Active
Disabled
Focused
Focused, Hover
Focused, Active
Focused, Disabled

Interaction

• Clicking a check box toggles between the ‘checked' and ‘unchecked’ modes.

• For check boxes in the partially selected state, clicking them will move them to the 'checked' state and check all of its child check boxes. An additional click will uncheck the master check box and all its child check boxes.

• Within a group of check boxes, each check box can be checked or unchecked independently. The user can check multiple options.

• Users should be able to select the check box by clicking on the box directly or by clicking on its label. 

• The check box can be selected by clicking on either the check box or the label.

• The check box will have a hovered state when hovering over either the check box or the label.

• The check box will have an active state during the action of clicking either the check box or the label.

• The partially selected state is visual only and indicates that some, but not all, of the child check boxes are checked. This state can’t be achieved by a direct user interaction on the check box itself.

...