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.

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.

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.