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.
The toggle item is a combinaison of an input and a label.
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
The label group helps the user to understand which toggle to select.
This mention allows to specify that this information is mandatory for the input to be valid.
Please note that this mention can also be used to say a specific input is optional when the other ones are mandatory.
Help text corresponds to a relevant piece of information to make sure the user understands what is needed.
Sor small : Used only on desktop when space is a concern.
Mor medium (default): Should be the exclusive size for touch devices, and be used in most of the cases on desktop.
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.
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.
Do's and Don'ts
User should never be asked for another validation action.
You can find more informations in this medium article.