ONGOING ONGOING
| Table of Contents |
|---|
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
...
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 | ImageText | Icon | Comment |
|---|---|---|---|
Regular |  | <TBD> | |
Hover |  | <TBD> | |
Active |  | <TBD> | |
Disabled |  | <TBD> | |
Error | |||
Warning | |||
Focus | |||
… |
Interaction
User can click inside the button to change it (not limited to the round switch)
...
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
<look on combobox>
Best practices
Use when:
...
The response is required immediately after the user “flips” the Toggle switch. They are commonly used for “On/Off” situations.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)
part of Inside a form (use radio buttons OR a single checkbox 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.Prefer Icon toggle over text toggle
Prefer short and informative accompanied labels
Design
...