Checkboxes are used when there is a list of options and the user may select any number of choices, including zero, one, or several.

Checkboxes can be selected and unselected without affecting other checkboxes in the group.

A lone checkbox is used for a signle option that the user can turn on or off.

# Component

Checkbox states

# Rules

Do

  • Make sure the minimum touch point (56pt) is observed
  • A checkbox should be a square that has a checkmark when selected
  • Visually display multitudes of choices as groups and clearly separate them from other groups on the same page

Don't

  • Use checkboxes as action buttons. They should only be used to change settings or make a selection.
  • Lay out checkbox groups horizontally. This makes it difficult for the user to separate each item in the list.

# Structure

Checkbox specifications

# Specifications

Min height Padding(x) Padding(y) Gutters Check size
56pt 16pt 12pt 16pt 40pt

# Typography

Font size Line height
16pt 24pt
Last Updated: 10/6/2020, 8:34:39 AM