Description
A switch is a control that is used to quickly toggle between two mutually-exclusive states, such as On and Off.
For example:
 |
Usage & Behavior
General guidelines
Default state
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 anywhere within the switch will change the state. The user is not limited to clicking the round toggle button.
Validation and Errors
Please refer to Field validation for more information.
 |
Transitions
There should be a smooth transition between the two states.
<TBD nice transition Visual design>
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.
