COMPONENTS

Checkbox

Checkboxes allow multiple selections from a set of options.

Checkboxes Intro

Checkboxes can be used alone, grouped, or nested.

Checkbox Anatomy
  1. Checkbox
  2. Label

Checkboxes can be grouped for users to pick from a set of related options.

Grouped Checkboxes

Checkboxes may be nested to show a hierarchy of selections. Checking a parent will automatically activate and check all children. Unchecking a parent checkbox will deactivate and uncheck all children. If a group contains a mix of checked and unchecked children, the parent will show an indeterminate state. Use the Tree component if you would like collapsable and expandable nested checkboxes.

Nested Checkboxes

Checkbox interaction states are enabled, hovered, focused, disabled, and error. Checkbox selection states are checked, unchecked and indeterminate. Checkboxes can be configured to display checked, unchecked, or disabled by default. When using checkboxes, there should be no action that the user cannot undo by checking the box again.  For example, it's okay to use checkboxes for filtering but not for deletion. Use Button Status if you need to include an action.

Checkbox States

Checkboxes can be displayed in large, medium and small sizes.

Checkbox Sizes
  • Always provide a label.
  • Write labels in sentence case.
  • Do not use punctuation in labels or after checkbox fields.
  • Keep labels short so users can check quickly and confidently.
  • Write labels as statements that the checked state makes true and the unchecked state makes false.
  • Title a checkbox group if the content of a group of checkboxes is not immediately apparent.
  • Both the checkbox and label should trigger selection.

For an interface requiring single or mutually-exclusive selection, see Radio. For Boolean or on/off state management, see Switch.