Components
Checkbox
Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.
Usage
Use a single Checkbox for a subordinate setting, such as with a "Remember me?" login scenario or with a terms of service agreement.
A Checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. Use multiple Checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.
If necessary, a heading can accompany a set of Checkboxes to provide further context or clarity. Use sentence case for Checkbox headings. In the example below, “Neon colors” would be the heading for the set of Checkboxes below.
Always use clear and concise labels for Checkboxes. Be explicit about the action that will follow if the Checkbox is selected. Labels appear to the right of Checkboxes.
Users should be able to select the checkbox by clicking on the box directly or by clicking on its label.
See the Dropdown section for guidance on how to use Checkboxes within a dropdown.
See the Data Tables section for guidance on how to use Checkboxes within a table.
The default view of a set of Checkboxes is having no option selected.If necessary, a heading can accompany a set of Checkboxes to provide further context or clarity. Use sentence case for Checkbox headings. In the example below, “IBM Designers” would be the heading for the set of Checkboxes below.
Using a checkbox to turn an option on or off
Checkboxes can have a parent-child relationship with other checkboxes.
- 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 becomes an indeterminate checkbox
Best Practices
Checkboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, hover, and pressed states.
If a list consists of multiple options, avoid using switches. Use checkboxes instead because they take up less space.
Checkboxes are for making selections from a list. They let users select more than one item and allow for easy selection or deselection of all items with a parent checkbox.