Intro

A checkbox lets the user set a binary value on the option associated with the control. When the user taps the checkbox, it toggles between checked and unchecked. Checked means that the state described by the checkbox text applies, or that the item has been chosen. Within a group of checkboxes, each checkbox can be checked or unchecked. In this way users can select multiple options from one group.

Usage

Do
  • Use checkboxes for multi-select. Each option in the group can be selected independently of each other
  • Use checkboxes when only one option can be selected or deselected, for example to accept terms of use. Use it only if the meaning is obvious (single checkbox).
  • Use checkboxes to display all available options directly to users.
Don't
  • Don’t use checkboxes for single selection. Use radio buttons instead.
  • Don’t use checkboxes if you want to offer two options for a “yes/no” or “on/off” type of decision. Use a switch control instead.

Anatomy

A. Property Name

A set of checkboxes is used to show all available values for a certain property. The property name should be displayed at the top. If the whole page is used to display available values, display the property name as the title in the app bar.

B. Checkbox Cell

A checkbox followed by a text value forms one checkbox cell. Each available option has its own cell. Display the checkbox cells in a meaningful sequence (for example, alphabetical sequence for names).

C. Cell Group

Checkbox cells can be grouped into categories. Each category has a header showing the name of the group.

Anatomy of checkboxes
Anatomy of checkboxes

Behavior and Interaction

The user taps a checkbox to toggle the state of the checkbox between checked and unchecked. Each checkbox cell is one touch target. When a specific option is disabled, apply 50% opacity to that checkbox cell. Disabled options are not interactive.

Enabled checkbox cells
Enabled checkbox cells
Disabled checkbox cells
Disabled checkbox cells

Specifications

Padding and Alignment

The checkbox cell is responsive based on device size. Each cell follows the spec of object cell. The horizontal padding follows the keylines of the page.

For each checkbox cell group, a header is used to display group name.

Mobile

Group name in a header (if applicable) on mobile
Group name in a header (if applicable) on mobile
Group name in a header (if applicable) on mobile - specifications
Group name in a header (if applicable) on mobile - specifications
A list of checkbox cells on mobile
A list of checkbox cells on mobile
A list of checkbox cells on mobile - specifications
A list of checkbox cells on mobile - specifications

Tablet

Group name in a header (if applicable) on tablet
Group name in a header (if applicable) on tablet
Group name in a header (if applicable) on tablet - specifications
Group name in a header (if applicable) on tablet - specifications
A list of checkbox cells on tablet
A list of checkbox cells on tablet
A list of checkbox cells on tablet - specifications
A list of checkbox cells on tablet - specifications

Resources

Material Design: Checkboxes