Components

Toggle

sketch:Readyscss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready

A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.

Toggle item

The toggle item is a combinaison of an input and a label.

Toggle group

Toggle-Overview

Toggle group is a combination of the following mentions. Please note that you can use five different cases:

  • Group label + toggle-s
  • Group label + requirement + toggle-s
  • Group label + requirement + help text + toggle-s
  • Groupe label + help text + toggle-s

Group label

The label group helps the user to understand which toggle to select.

Requirement

This mention allows to specify that this information is mandatory for the input to be valid.

Useful tip

Please note that this mention can also be used to say a specific input is optional when the other ones are mandatory.

Help text

Help text corresponds to a relevant piece of information to make sure the user understands what is needed.

Sizes

  • S or small : Used only on desktop when space is a concern.
  • M or medium (default): Should be the exclusive size for touch devices, and be used in most of the cases on desktop.

States

Displaying On/Off states in label

You can use a reactive label, witch will change depending on the state of the toggle.

Label on two lines

In uncommon use cases where the text is on two lines, the text box must stay centred with the toggle.

Be aware
As a reminder, a toggle is used to have instant feedback, using a short label is the best way to use this component.

Specific case

In specific cases, you can use the toggle without its default label.

However, make sure that its use must be relevant and understood by users.

Toggle--ToggleOnly

Do's and Don't

Always use M sized toggle on touch devices.
Toggle should always trigger instantaneous action and feedbacks.
User should never be asked for another validation action.
Use checkboxes instead of toggles if another validation action is to be required from the user.
Never use toggle for multiple choices in a set of related options, use checkboxes instead.
Never use toggle when validation action is required.
Good to know

You can find more informations in this medium article.