A checkbox allows users to set a binary value to “true” or “false”, indicating whether or not an item has been chosen. If a checkbox acts as a parent for a group of checkboxes (for example, Select All), it can also display an indeterminate state to indicate that not all subitems have been checked.

Different checkbox states – live examples

When to Use

Use the checkbox to:

• Select or deselect. Use it only if the meaning is obvious.
• Offer a list of options that can be selected independently of each other.
• Group multiple suboptions under a parent option that requires an indeterminate selection state.

Don’t use the checkbox:

• To offer multiple selection for a large list of options that don’t need to be displayed permanently on the UI. Consider using a multi-combo box instead.
• To choose only one option from a list. For a small list, use a radio button group instead. For a large list, use the select component.
• To perform an instantaneous action that doesn’t need reviewing or confirming. Consider using the switch instead.
• If there is not enough space available on the screen. Use a combo box instead.

Anatomy

The checkbox component has two parts:

1. Box: Checkbox with 3 possible settings: checked, unchecked, or indeterminate.
2. Text: Describes the purpose of checkbox.
   If the purpose of the checkbox is already described by other elements, the checkbox text is optional.

Behavior and Interaction

Clicking a checkbox toggles the state of the checkbox between checked and unchecked. Checked means that the state described by the checkbox text applies, or that the item has been chosen. Unchecked means that it doesn’t apply.

Clicking a checkbox triggers a visual indication of focus: a solid line surrounds the entire component.

A parent checkbox can also display an indeterminate, partially selected state, indicating that some but not all of the dependent input fields are selected. This state is commonly used for a group of checkboxes and is only a visual, non-interactive state. If all dependent checkboxes are checked, the parent checkbox is also checked automatically, and vice versa.

Checkbox group – live example

Related Links