Short description

Checkboxes allow the user to make 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. For instance, when users should accept the terms and conditions. It is then common with a checkbox to confirm the action and a button to submit the answer.

Do's and don'ts

• 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.

• Don’t use checkboxes for actions

Write checkbox labels so that the customers can easily understand what it means to check the box or leave it blank. It can be difficult when customers must check an individual stand-alone checkbox, for example, that they accept the terms or want to receive news and offers by e-mail. Or when they should be able to turn a setting on or off and it is essential that they actively take a stand on the choice. (If there is a default option that almost everyone will choose, use a toggle instead.)

The label and options must also be adapted to suit each other. If the field label is a yes or no question, the answer options should be yes and no and nothing else. Since the user can only choose one of these options, use radio buttons instead.

Furthermore, remember to write consistent options. Decide if the options should

• consist of complete sentences beginning with uppercase and ending with a full stop
• constitute one continuing sentence beginning with lowercase and only the last point ending with a full stop

or

• a single word or a couple of words and no full stop.

Avoid negations and use the I-form

Avoid negations such as Do not send me more e-mails in the checkbox label, as this would mean that users have to check the box to prevent something from happening. Also, do not use questions like Do you want newsletters from us? The convention is to use the I-form for this type of checkbox.

Do's and don'ts

• Ja tack, jag vill ha förtur på exklusiva erbjudanden och nyheter via mejl.
• Yes please, I want to get priority on exclusive offers and news by e-mail.

• Vill du ha exklusiva erbjudanden och nyheter via mejl?
• Do you want to get priority on exclusive offers and news by e-mail?

Nor

• Ja tack, jag vill inte missa exklusiva erbjudanden och nyheter via mejl.
• Yes please, I do not want to miss out on preference on exclusive offers and news by e-mail.

Jag-form (Swedish)

I-form (English)

When the user accepts terms, use I-form and avoid a question

Do's and don'ts

• Jag har läst informationen och granskat de uppgifter jag fyllt i. Jag försäkrar att de är riktiga.
• I have read the information and reviewed what I entered in the form. I ensure that everything is correct.

• Försäkrar du att du läst informationen och granskat de uppgifter du fyllt i? Försäkrar du att de är riktiga?
• Have you read the information and reviewed what was entered in the form? Can you ensure that everything is correct?

Jag-form (Swedish)

I-form (English)

Multiple options

Do's and don'ts

• Provide clear instructions that the user can select multiple options.
• The label and options must also be adapted to suit each other. If the field label is a yes or no question, the answer options should be yes and no and nothing else.

Multiple answers (Swedish)

Multiple answers (English)

Decide if the options should

• consist of complete sentences beginning with uppercase and ending with a full stop
• constitute one continuing sentence beginning with lowercase and only the last point ending with a full stop

or

• a single word or a couple of words and no full stop.

Write option texts that are consistent

Do's and don'ts

• Write option texts that are consistent.

Inconsistent options (Swedish)

Inconsistent options (English)

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