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

Radio buttons

StableAccessible

Radio buttons are used to pick an option when only one option can be chosen.

Principles

  • If the user can select more than one option from a list, use checkboxes instead.
  • Radio button 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.
  • It is recommended to have a default option checked for radio button groups Radio button groups.
  • When there are more than 4 options, consider switching to dropdown component.
  • If Radio buttons are related to each other, use HDS Selection group to achieve that.

Accessibility

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

Usage

Radio button with label

Core code example:

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

React code example:

<RadioButton id="radio" label="Label" />
<RadioButton id="radio" label="Label" checked />
<RadioButton id="radio3" label="Label" disabled />
<RadioButton id="radio4" label="Label" checked disabled />

Radio button group

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

Radio button group

Core code example:

<fieldset class="hds-selection-group">
<legend class="hds-selection-group__legend">Radio button 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="Radio button 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>

Demos & API

Core

Radio buttons in hds-core

React

Radio buttons in hds-react

RadioButton API