Checkboxes

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.