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)
For example:
 |
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 | On | Off | Icon | Comment |
|---|---|---|---|---|
Regular |  |  | <TBD> | |
Hover |  |  | <TBD> | |
Active |  |  | <TBD> | |
Disabled |  |  | <TBD> | |
Error | ||||
Warning | ||||
Focus | ||||
Focused |  |  | ||
Focused Hover |  |  | ||
Focused Active |  |  | ||
Focused 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
Please refer to Field validation page for more information.
<TBD picture of warning> |
Best practices
Use when:
The response is required immediately after the user “flips” the Toggle switch. They are commonly used for “On/Off” situations
Action is needed to be emphasized (for example in a ribbon)
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)
Inside a form (use radio buttons OR a single checkbox instead)
General
Prefer Icon toggle over text toggle
Prefer short and informative accompanied labels
