ToggleButton

Usage

Example

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. Also see guidelines for choosing between radiobuttons, checkboxes and toggles.
• 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.

Variations

Default

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

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.