Checkbox

The checkbox allows users to select one or more options from a list. Each checkbox in a group can be selected independently.

Default
Preferred contact methods
Select all ways we may contact you
Default
Preferred contact methods
Select all ways we may contact you
States
Default Unselected state, waiting for user interaction.
Hover Hover state indicates interactivity when the cursor is over the checkbox by changing the border colour to dark.
Active/Focus Active state: Occurs during the moment the checkbox is being clicked or toggled by the user. Focus state: Indicates that the checkbox is currently selected to receive user input
Disabled The checkbox is visible but not interactive. It appears greyed out to indicate the option is unavailable.
Read only Checkbox state is visible but not editable. No cursor interaction allowed. Current state is locked.
Checked The checkbox is selected. A checkmark confirms the user's choice has been registered.
This field is required
Error Triggered when validation fails, such as when a required checkbox is left unchecked. A red border and error message guide the user to correct the selection.
Behaviour
Selecting or deselecting checkbox
  • All checkboxes are unselected by default.
  • When a user clicks a checkbox once, the option is selected, and clicking it again removes the selection.
  • Users can select one or multiple options from a list.
  • Each checkbox works independently. Checking one doesn't affect others.
Specs
1
Checkbox
  • The interactive element that users click to select or deselect
2
Label
  • Describes the option of the checkbox
  • Recommended max 45 char
3
Helper text
  • Optional. Provides additional guidance or contextual information.
  • Keep copy short. Read usage guidelines.
  • Recommended max 30 char (include spaces).
Checkbox anatomy — items 1, 2, 3
3 Optional group helper line
Dos and Don'ts
  1. Use checkboxes to allow users to choose more than one option. If users can only choose one option (like "Yes" or "No"), use radio buttons instead.
  2. Organise the checkboxes in a logical order — alphabetically, by most popular, or chronologically (e.g. days of the week).
  3. Keep label text concise to ensure quick readability, and use consistent text lengths.