Skip to content

Checkbox

Checkbox is a form control for single and multiple selections.

On this page

On this page

Usage

Use checkboxes to allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

States

Checkboxes have static dimensions and three different states: rest (default), focus, and disabled.

An image showing checkboxes with three different states, rest, focus, and disabled.

Selected states

Checkboxes are capable of showing two forms of selection: checked (left) or indeterminate (right).

An image showing checkboxes selected as checked and indeterminate

The indeterminate state is colored in some browsers (e.g. Safari) and grey in others (e.g. Chrome).

Best practices

  • An individual checkbox should not have its own validation message or style. Instead, show a validation message on the checkbox group. For more information, see the Validation Message section in the Forms documentation.
  • An individual checkbox button cannot be marked as required. Instead, make a selection required using the checkbox group. For more information, see the Required field indicator in the Forms documentation.