Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonPrinciplesAccessibilityUsage & variationsDemos & APITooltip
Patterns
About
Contributing
Resources

Toggle button

DraftAccessible

Toggle button allows the user to switch between two distinct states such as "On" and "Off".

Principles

  • A label should always be provided with a toggle button.
    • Make sure that the label is clear and concise. A good toggle button label describes the effect that will happen when the toggle button is set to "On" position.
    • For example, use the label "Allow notifications" instead of "Do you want to receive notifications?".
  • The toggle button should have an immediate effect when activated.
    • 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.
      • Also, avoid using toggle buttons if the effect requires an asynchronous call.
    • Toggle buttons must not be used in forms that require pressing a submit button in order to the selection come into effect - unless they have an immediate effect inside the form.
    • If your toggle button does not have an immediate effect, use a single Checkbox component instead.
  • Toggle button will always have a default option. Toggle buttons that do not have a state at all (neither "On" or "Off") must not be used.

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.
  • If the toggle button makes other elements appear on the view, those elements should be located next to the toggle button - preferably right after or below it.
    • While not recommended, if a toggle button makes elements appear in other parts of the user interface, you need to make sure to notify assistive technologies about the change. You can use HDS Notification component for this purpose.
  • HDS Toggle button includes a small animation when the toggle state is changed. However, the animation is considered non-decorative and therefore it does not have to be able to be disabled. See WCAG 2.3.3 Animation from Interactions guideline for more information.

Usage & variations

Toggle button

The default HDS toggle button variant includes a label above the toggle button familiar from other HDS form components.


React code example:

{
() => {
const [checked1, setChecked1] = React.useState(false);
const [checked2, setChecked2] = React.useState(false);
return (
<>
<ToggleButton id="toggle-button-1" label="Label" checked={checked1} onChange={() => setChecked1(!checked1)} />
<br />
<ToggleButton
id="toggle-button-2"
disabled
label="Label"
checked={checked2}
onChange={() => setChecked2(!checked2)}
/>
</>
);
};
}

Toggle button with a horizontal label

The toggle button label can also be positioned horizontally. This alignment is often used on smaller screens (e.g. mobile phones) and tighter user interface spaces.


React code example:

{
() => {
const [checked1, setChecked1] = React.useState(false);
const [checked2, setChecked2] = React.useState(false);
return (
<>
<div style={{ maxWidth: '320px' }}>
<ToggleButton
id="toggle-button-1"
label="Label"
checked={checked1}
onChange={() => setChecked1(!checked1)}
variant="inline"
/>
<br />
<ToggleButton
id="toggle-button-2"
disabled
label="Label"
checked={checked2}
onChange={() => setChecked2(!checked2)}
variant="inline"
/>
</div>
</>
);
};
}

Demos & API

React

Toggle buttons in hds-react

Toggle button API