Overview
Checkboxes should be used in forms that require submission and processing. The checkbox is shown as a square box that is ticked when it is activated. It allows the user to select one or more options among all the limited choices and requires a button press to confirm the user’s settings before they are committed.
Note: Checkboxes for touchscreen apps: this component includes a large, invisible touch target around the checkbox and Label to ensure high usability.
Usage
Use when
- Affording a binary selection, like accepting terms and conditions.
- Affording multiple selections from a set of options.
- Enabling selection of an object, such as a Card.
- Affording selection of a row within a data table.
- There is a parent and child relationship. User may use a parent checkbox to make a bulk selection of all list items. Unchecking the parent deselects all of the list items. Alternatively, user may select children individually, when the parent is not selected.
Don’t use when
-
A user can select only one option from a list. Use Radio Buttons instead. Checkboxes allow the user to select multiple items in a set whereas radio buttons allow the user to select only one option.
-
Turning a feature, mode, or functionality on and off. Instead, use a Switch.
-
Checking or unchecking elicits an immediate change in the UI or functionality, such as enabling a disabled field or revealing more controls. Instead, use a Switch.
-
Checking or unchecking elicits a change in background functionality without affecting the UI, like disabling an email notification. Instead, use a Switch.
