Our checkbox have 4 customized states. Hover states follows the browser default.
Error state follows the form validation rule.
States in Context
An example for using states in real context.
- Checked-Disabled: Use for must included items
- Unchecked-disabled: Use for items are not available currently, but will become available when use makes some changes. There is benefit to surface this item. i.e. surface cross sale and up sale opportunities
Checkboxes are used to surface multiple choices. This control is highly discoverable, but less scaleable. If the list gets too long, consider dropdown selector.
- When a group of checkboxes is activated (one from the group is selected), enable keyboard interactions (i.e. arrow up and down).
Spacing & Alignment
Why Use This Pattern
The user needs to select from non-mutually-exclusive choices or toggle individual settings.
- All choices are immediately visible.
- Choices with long labels can be seen in their entirety.
What is the Solution
A checkbox is an on/off toggle for a single item. A checkbox can be selected or unselected. Any number of checkboxes in a group of checkboxes can be selected at the same time.Checkboxes are independent of one another.
Keyboard and Accessibility
Ensure that users can navigate to and modify the checkboxes using only the keyboard.
When to Use This Pattern
- The user needs to make a choice between non-mutually-exclusive options.
- The user needs to set attributes or properties.
Do Not Use This Pattern When
- Space is constrained (use a List Box).
- The user may need to select a single mutually exclusive choice within a group (use Radio Buttons).
- The user may need to enter a choice that is not pre-defined (use a Combo Box).
- The user needs to select from a range of values (use a Slider).