Skip to main content Skip to navigation Skip to search

A checkbox is a form element comprising a series of items that make a list of options that allow the user to select any number of choices. Those choices can range from zero, one or several. The selections are not mutually exclusive.

Usage

Checkboxes act independently of each other. This way, selecting any given checkbox does not affect other checkboxes and their status. Use a checkbox:

  • For binary choices
  • For providing multiple selectable choices

We recommend using seven or fewer checkboxes. Keep the label of a checkbox to a single line.

Use a checkbox for:

  • For binary choices
  • For selecting multiple choices
vs

Use a toggle for On / Off choices but not for multiple choices

States

Checkboxes can have a several of states. These stated give the user additional information oe prevent user interaction. The indeterminate state is programmatically set by the application for specific conditions.

Enabled

Use when interactive. The checkboxes can be selected by the user or system.

Disabled

Use when not interactive. For example, when a user does not have permission to change specific settings.

Indeterminate

Use in tree selection as a parent node with a mix of selected and unselected children.

Please agree to proceed

Error

Use to communicate a user or system error. This validation can happen when the user moves away from the checkbox or after attempting to submit the form. For example, remind the users of unconsented terms of use after clicking on the submit button.

Settings updated

Success

Use to communicate a user or system error. This validation can happen when the user moves away from the checkbox or after attempting to submit the form. For example, remind the users of unconsented terms of use after clicking on the submit button.

Layouts

Checkboxes are available in vertical, vertical inline, horizontal, horizontal inline, and compact layout. See more layout guidelines on the form page.

Vertical

message text

Vertical Inline

message text

Horizontal

message text

Horizontal Inline

message text

Compact

message text