ONGOING
| Table of Contents |
|---|
Description
Toggle A switch is a control that is used to quickly switch toggle between two states that cannot both occur at the same time (mutually exclusive) mutually-exclusive states, such as On and Off.
For example:
 |
Usage & Behavior
General guidelines
Default state
The toggle button switch must start with a default selection.
Content
...
Within the button, there can be either text On/Off or visual “V”/”X”
...
The switch consists of:
Main button area, including:
a colored background, which changes when the state is changed.
a round toggle button, which toggles between the two sides when the state is changed.
(optional) a label within the button area, describing the current state. This can be either ✓ and ☓, or On and Off.
A preceding label, describing what the switch will do when it is in the On state (e.g. “Show Show only employees”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>Clicking anywhere within the switch will toggle the state. The user is not limited to clicking the round toggle button.
Validation and Errors
Please refer to Field validation page for more information.
<TBD picture of warning> |
Transitions
There should be a smooth transition between the two states.
<TBD nice transition Visual design>
Best practices
Use when:
The response when a change is required immediately after the user “flips” toggles the Toggle switch. They are commonly used for “On/Off” situationsAction is needed to be emphasized (
where there are On / Off options.
when you want to emphasize an action, for example in a ribbon).
Don’t use:
The user has to choose several where there are more than 2 options
The where the user has to perform several actions for before the change to will become effective (in this case, choose checkboxes)→ use Check Boxes instead.
Inside a form (use radio buttons OR → use Radio Buttons or a single checkbox Check Box instead).
General
Prefer Icon toggle over text toggle
Prefer Where possible, use ✓ and ☓ instead of On and Off within the button area.
Keep preceding labels short and informative accompanied labels.
Design
...