ONGOING
Description
Toggle is a control that is used to quickly switch between two states that cannot both occur at the same time (mutually exclusive)
Usage & Behavior
General guidelines
Default state
The toggle button must start with a default selection.
Content
Within the button, there can be either text On/Off or visual “V”/”X”
The accompanying label of the button should describe what the control will do when the switch is on (e.g. “Show only employees”)
States
State | Image | Comment |
|---|---|---|
Regular |  | |
Hover |  | |
Active |  | |
Disabled |  |
Interaction
User can click inside the button to change it (not limited to the round switch)
Transition
There should be a smooth transition between the two states of the button
<TBD nice transition Visual desgin>
Validation and Errors
Covered in Field Validation
Best practices
Use when:
it's needed to clearly show the mode or state and should not require the user to click Save or Submit to apply the new state
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)
General
Use adjectives rather than verbs to describe labels (e.g. Show week number) and the state of the object affected
Toggles should provide immediate results - should not require the user to click Save or Submit to apply the new state.
