| Table of Contents |
|---|
...
The switch must start with a default selection.
Content
The switch consists of:
Main button area, including:
a colored background, which changes when the state is changed.
a round toggle button, which moves 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 only employees).
States
State | Text On | Text Off | Icon On | Icon Off | Comment |
|---|---|---|---|---|---|
Regular |  |  |  |  | |
Hover |  |  |  |  | |
Active |  |  |  |  | |
Disabled |  |  |  |  | |
Focused |  |  |  |  | |
Focused , Hover |  |  |  |  | |
Focused , Active |  |  |  |  | |
Focused , Disabled |  |  |  |  |
Interaction
Clicking
...
the toggle triggers the action immediately.
The user is not limited to clicking the round toggle button: clicking anywhere within the switch will change its state.
Validation and Errors
Please refer to Field validation for more information.
...
There should be a smooth transition between the two states.<TBD nice transition Visual design>. See code below.
Best practices
Use:
when a change is required immediately after the user toggles the switch.
where there are On / Off options.
when you want to emphasize an action, for example in a ribbon.
Don’t use:
where there are more than 2 options.
where the user has to perform several actions before the change will become effective → use Check Boxes instead.
Inside a form → use Radio Buttons or a single Check Box instead.
General
Where possible, use ✓ and ☓ instead of On and Off within the button area.
Keep preceding labels short and informative.
...