Short description

Checkboxes are used when users can select any number of choices, including zero, one, or several options. This means that each checkbox is independent of all other checkboxes and checking one box does not uncheck the others.

A stand-alone checkbox is used for a single option that the user can turn on or off.

When and how to use it

Checkboxes are mainly used for when users should change settings or confirm actions, such as selecting or deselecting if they want newsletters. When using checkboxes to confirm an action, it can be useful to add an extra step or action. One example is when users should accept the terms and conditions. Then it is common to have a checkbox to confirm the action and a button to submit the answer.

Do's and don'ts

• Provide clear instructions that the user can select multiple options.
• If the checkboxes are presented in a list, it’s often better to have the list in a vertical layout. When using a horizontal layout with multiple options per line, make sure to have enough space between the checkboxes. This makes it clear which choice goes with which label.
• Use positive and active wording for checkbox labels, so that it’s clear what will happen if the user turns on the checkbox. Avoid negations such as “Don’t send me more email,” which would mean that the user would have to check the box in order for something not to happen.

• Don’t use checkboxes for actions

To make it easier for users to use the checkbox, the label should also be clickable.

Measurements

• Size: 16x16 px
• Font: Body, regular, Grey 800,1 rem,
• Line height: 20 px

States

• Text: Grey 800
• Normal border: Grey 400
• Hover: Blue
• Selected: Dark blue 2
• Pressed, filled: Dark blue 2
• Disabled, border: Grey 200
• Disabled, filled: Grey 100

• Blue
• Dark blue 2
• Grey 100
• Grey 200
• Grey 400

Error state

• Error text: 14 px, regular
• Line height: 20 px

• Dark red 1

Dark mode

Read about Pattern: Dark mode