Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupPrinciplesAccessibilityUsage & variantsDemos & APIStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Selection group

StableAccessible

Selection group allows grouping related form selection elements (such as Checkboxes) to each other.

Principles

  • Currently, Selection group can contain either Checkboxes or Radio buttons.
    • If the user can select more than one option from a list, use checkboxes.
    • If the user can only select one option from a list, use radio buttons.
  • Default option must be set for Radio button groups. For Checkbox groups, this is recommended.
  • Visible label must be given to the Selection group. The label should be clear and describe the choice the user is about to make.
  • Selection group can be aligned both vertically and horizontally. Vertical alignment is recommended. Horizontal alignment can be used when there are less than 4 options.
    • Note that horizontal Selection groups must not span to multiple lines.

Accessibility

  • Aim to make the order of Selection group options as intuitive as possible for assistive technologies. This depends on the group content. An alphabetical ordering is a good starting point, but for some content it can be possible to order them by size (smaller to larger), etc.

Usage & variants

Vertical group

Vertical selection group is the recommended way to present grouped form controls. Vertical checkbox groups are generally easier to perceive and read.

Vertical checkbox group

Vertical radio group

Core code example:

<fieldset class="hds-selection-group">
<legend class="hds-selection-group__legend">Vertical 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>
<fieldset class="hds-selection-group">
<legend class="hds-selection-group__legend">Vertical radio group</legend>
<div class="hds-selection-group__items">
<div class="hds-selection-group__item">
<div class="hds-radio-button">
<input type="radio" id="v-radio1" name="v-radio" class="hds-radio-button__input" name="example" value="foo" checked />
<label for="v-radio1" class="hds-radio-button__label">Option</label>
</div>
</div>
<div class="hds-selection-group__item">
<div class="hds-radio-button">
<input type="radio" id="v-radio2" name="v-radio" class="hds-radio-button__input" name="example" value="bar" />
<label for="v-radio2" class="hds-radio-button__label">Option</label>
</div>
</div>
<div class="hds-selection-group__item">
<div class="hds-radio-button">
<input type="radio" id="v-radio3" name="v-radio" class="hds-radio-button__input" name="example" value="baz" />
<label for="v-radio3" class="hds-radio-button__label">Option</label>
</div>
</div>
<div class="hds-selection-group__item">
<div class="hds-radio-button">
<input type="radio" id="v-radio4" name="v-radio" class="hds-radio-button__input" name="example" value="qux" />
<label for="v-radio4" class="hds-radio-button__label">Option</label>
</div>
</div>
</div>
</fieldset>

React code example:

<SelectionGroup label="Vertical 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>
<SelectionGroup label="Vertical radio group">
<RadioButton id="v-radio1" name="v-radio" value="1" label="Option" checked />
<RadioButton id="v-radio2" name="v-radio" value="2" label="Option" />
<RadioButton id="v-radio3" name="v-radio" value="3" label="Option" />
<RadioButton id="v-radio4" name="v-radio" value="4" label="Option" />
</SelectionGroup>

Horizontal group

Horizontal selection group can be used in situations where there are only a few (less than 4) options. Otherwise, a vertical alignment is recommended.

Horizontal checkbox group

Horizontal radio group

Core code example:

<fieldset class="hds-selection-group">
<legend class="hds-selection-group__legend">Horizontal checkbox group</legend>
<div class="hds-selection-group__items hds-selection-group__items--horizontal">
<div class="hds-selection-group__item">
<div class="hds-checkbox">
<input type="checkbox" id="h-checkbox1" name="h-checkbox1" class="hds-checkbox__input" value="foo" checked />
<label for="h-checkbox1" class="hds-checkbox__label">Option</label>
</div>
</div>
<div class="hds-selection-group__item">
<div class="hds-checkbox">
<input type="checkbox" id="h-checkbox2" name="h-checkbox2" class="hds-checkbox__input" value="bar" checked/>
<label for="h-checkbox2" class="hds-checkbox__label">Option</label>
</div>
</div>
<div class="hds-selection-group__item">
<div class="hds-checkbox">
<input type="checkbox" id="h-checkbox3" name="h-checkbox3" class="hds-checkbox__input" value="baz" />
<label for="h-checkbox3" class="hds-checkbox__label">Option</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="hds-selection-group">
<legend class="hds-selection-group__legend">Horizontal radio group</legend>
<div class="hds-selection-group__items hds-selection-group__items--horizontal">
<div class="hds-selection-group__item">
<div class="hds-radio-button">
<input type="radio" id="h-radio1" name="h-radio" class="hds-radio-button__input" name="example" value="foo" checked />
<label for="h-radio1" class="hds-radio-button__label">Option</label>
</div>
</div>
<div class="hds-selection-group__item">
<div class="hds-radio-button">
<input type="radio" id="h-radio2" name="h-radio" class="hds-radio-button__input" name="example" value="bar" />
<label for="h-radio2" class="hds-radio-button__label">Option</label>
</div>
</div>
<div class="hds-selection-group__item">
<div class="hds-radio-button">
<input type="radio" id="h-radio3" name="h-radio" class="hds-radio-button__input" name="example" value="baz" />
<label for="h-radio3" class="hds-radio-button__label">Option</label>
</div>
</div>
</div>
</fieldset>

React code example:

<SelectionGroup label="Horizontal checkbox group" direction="horizontal">
<Checkbox id="h-checkbox1" name="h-checkbox1" label="Option" checked />
<Checkbox id="h-checkbox2" name="h-checkbox2" label="Option" checked />
<Checkbox id="h-checkbox3" name="h-checkbox3" label="Option" />
</SelectionGroup>
<SelectionGroup label="Horizontal radio group" direction="horizontal">
<RadioButton id="h-radio1" name="h-radio" value="1" label="Option" checked />
<RadioButton id="h-radio2" name="h-radio" value="2" label="Option" />
<RadioButton id="h-radio3" name="h-radio" value="3" label="Option" />
</SelectionGroup>

Demos & API

Core

SelectionGroup in hds-core

React

SelectionGroup in hds-react

SelectionGroup API