Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxPrinciplesAccessibilityUsageDemos & APIDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Checkboxes

StableAccessible

Checkboxes are used to pick an option when one or more options can be chosen.

Principles

  • If the user can only select one option from a list, use radio buttons instead.
  • Checkbox label should always clearly describe what will happen if the specific option is chosen. A good practice is to keep labels a maximum of three words long.
  • Checkboxes work independently from each other. This means that checking one option should never affect other checkboxes.
  • If Checkboxes are related to each other, use HDS Selection group to achieve that.
  • Checkboxes should not have any immediate effects. The checkbox selection takes effect when the user presses a submit button (e.g. in a form). If you need the selection to have an immediate effect, use HDS Toggle button component instead.

Accessibility

  • It is advisable to use colour combinations provided by the implementation. These combinations are ensured to comply with WCAG AA requirements. When customising colors, refer to colour guidelines to ensure accessibility.
  • When multiple Checkboxes are related to each other, group them together using HDS Selection group. Selection group also includes a title for the group.

Usage

Checkbox with label

Core code example:

<!-- Enabled -->
<div class="hds-checkbox">
<input type="checkbox" id="checkbox" class="hds-checkbox__input" />
<label for="checkbox" class="hds-checkbox__label">Label</label>
</div>
<!-- Enabled & selected -->
<div class="hds-checkbox">
<input type="checkbox" id="checkbox" class="hds-checkbox__input" checked />
<label for="checkbox" class="hds-checkbox__label">Label</label>
</div>
<!-- Disabled -->
<div class="hds-checkbox">
<input type="checkbox" id="checkbox" class="hds-checkbox__input" disabled />
<label for="checkbox" class="hds-checkbox__label">Label</label>
</div>
<!-- Disabled & selected -->
<div class="hds-checkbox">
<input type="checkbox" id="checkbox" class="hds-checkbox__input" checked disabled />
<label for="checkbox" class="hds-checkbox__label">Label</label>
</div>

React code example:

<Checkbox id="checkbox1" label="Label" />
<Checkbox id="checkbox2" label="Label" checked />
<Checkbox id="checkbox3" label="Label" disabled />
<Checkbox id="checkbox4" label="Label" checked disabled />

Checkbox group

Related checkboxes can be grouped together with the Selection group component. See HDS Selection group page for full documentation.

Checkbox group

Core code example:

<fieldset class="hds-selection-group">
<legend class="hds-selection-group__legend">Checkbox group</legend>
<div class="hds-selection-group__items">
<div class="hds-selection-group__item">
<div class="hds-checkbox">
<input type="checkbox" id="v-checkbox1" name="v-checkbox1" class="hds-checkbox__input" value="foo" checked />
<label for="v-checkbox1" class="hds-checkbox__label">Option</label>
</div>
</div>
<div class="hds-selection-group__item">
<div class="hds-checkbox">
<input type="checkbox" id="v-checkbox2" name="v-checkbox2" class="hds-checkbox__input" value="bar" checked/>
<label for="v-checkbox2" class="hds-checkbox__label">Option</label>
</div>
</div>
<div class="hds-selection-group__item">
<div class="hds-checkbox">
<input type="checkbox" id="v-checkbox3" name="v-checkbox3" class="hds-checkbox__input" value="baz" />
<label for="v-checkbox3" class="hds-checkbox__label">Option</label>
</div>
</div>
<div class="hds-selection-group__item">
<div class="hds-checkbox">
<input type="checkbox" id="v-checkbox4" name="v-checkbox4" class="hds-checkbox__input" value="qux" />
<label for="v-checkbox4" class="hds-checkbox__label">Option</label>
</div>
</div>
</div>
</fieldset>

React code example:

<SelectionGroup label="Checkbox group">
<Checkbox id="v-checkbox1" name="v-checkbox1" label="Option" checked />
<Checkbox id="v-checkbox2" name="v-checkbox2" label="Option" checked />
<Checkbox id="v-checkbox3" name="v-checkbox3" label="Option" />
<Checkbox id="v-checkbox4" name="v-checkbox4" label="Option" />
</SelectionGroup>

Demos & API

Core

Checkboxes in hds-core

React

Checkboxes in hds-react

Checkbox API