Checkboxes, radio buttons, or toggles?

Helsinki Design System has checkboxes, radio buttons and toggles that might seem similar to each other, but it is important to consider the use cases to decide which one to use.

TLDR (Too long, didn't read)

Use checkboxes to select multiple parallel items.
Use checkbox for single selections to confirm on/off selection.
Use radio buttons to select mutually exclusive options.
Use toggle for selections affecting system settings or changing status.

When to use radio buttons?

HDS RadioButton component documentation

An application can use radio buttons when there is a list of two or more mutually exclusive choices and the user needs to select one of them. After clicking the non-selected radio button, whatever was previously selected is deselected. In traditional application design, the first radio button in the list was always selected by default. But not all modern websites follow this convention and rather use empty radio buttons by default. Websites today, forms, and applications inconsistently select one or leave all radio buttons blank by default. The lack of a standard can be confusing to users.

HDS recommends presenting radiobuttons unticked by default.

This enables confirming user has actually made a selection. This helps automatic validation and avoiding incorrect default values.

Radio buttons have a lower cognitive load than dropdown menus because they make all options permanently visible so that users can easily compare them. Radio buttons are also easier to operate for users who have difficulty making precise mouse movements. (Limited space might sometimes force you to violate this guideline, but do try to keep choices visible whenever possible.)

Example use: Binary choices like "Yes" or "No", age group or other similar choices that exclude other options.

Choose your age group Under 16
17-35
35-64
Over 65

When to use checkboxes?

HDS checkbox component documentation

Checkboxes allow the user to select zero, one, or multiple selections from a list of options. In other words, each checkbox is independent of the other checkboxes, i.e. checking one does not uncheck the others.

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

Example use: Single selection confirming On/Off selection

I have a loyalty card

HDS recommends using checkboxes when the user is required to make more than two choices or confirm a single choice.

Example use: Selecting interests

Select your interests Music
Arts and museums
Sports and outdoor activities
Cooking

HDS recommends using checkboxes when the user can select multiple options that are not excluding other options.

When to use toggles or switches?

HDS toggle component documentation

Toggle switches are digital On/Off switches. They prompt users to choose between two mutually exclusive options and always have a default value. Toggle buttons have been inspired by real-world physical switches (e.g. a light switch). Therefore users expect something to happen immediately when the toggle button is activated. Toggle buttons should do three things — change states, show the current state, and reveal unselected options. If your toggle button doesn’t do all these things, it has poor usability. Toggles are best used for switching between two opposing states of system functionality and preferences. They are similar to radio buttons or checkboxes in that they allow users to select from only two options.

Example use: Switching between themes.

Default theme
Use primary theme

Sources and further reading

Note that these articles might include guides that are not in line with HDS guidelines.