Skip to end of metadata
Go to start of metadata
You are viewing an old version of this content. View the current version.
Compare with Current
View Version History
« Previous
Version 26
Next »
Toggle is a control that is used to quickly switch between two possible mutually exclusive states.
Toggles are used for binary actions that occur immediately after the user “flips” the Toggle switch. They are commonly used for “On/Off” situations.
Usage & Behavior
General guidelines
Text
- The label should describe what the control will do when the switch is on
- Use adjectives rather than verbs to describe labels and the state of the object affected.
States

Interaction
User can click anywhere inside the button to change sets
Validation and Errors

- Toggles should provide immediate results - should not require the user to click Save or Submit to apply the new state.
- Toggles should not be part of a form (use radio buttons instead)
- Use a toggle if:
- You need to clearly show the mode or state that a setting is in
- Do not use a toggle if:
- The user has to choose several options
- The user has to perform several actions for the change to become effective (in this case, choose checkboxes)
Design
Current appearances in our products
Expand to view products and screenshots
WFM Calendar:

New LUX design