ONGOING
Description
Toggle is a control that is used to quickly switch between two possible mutually exclusive states
Usage & Behavior
General guidelines
Content
Can be either text On/Off or visual “V”/”X”
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
State | Image | Comment |
|---|---|---|
Regular |  | |
Hover |  | |
Active |  | |
Disabled |  |
Interaction
User can click inside the button to change sets, not limited to the round switch
Transition
There should be a smooth transition between the two states of the button
<TBD>
Validation and Errors
A warning can be displayed upon the button
For more information validations please see Field Validation
Best practices
Toggles should provide immediate results - should not require the user to click Save or Submit to apply the new state.
Use when:
you need to clearly show the mode or state that a setting is in
The response is required immediately after the user “flips” the Toggle switch. They are commonly used for “On/Off” situations.
Don’t use:
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)
part of a form (use radio buttons instead)
Design
Current appearances in our products
WFM Calendar:
