| Table of Contents |
|---|
...
A switch button 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
...
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 small-sized button may have On and Off, or Empty (Base).
A preceding label, describing what the switch will do when it is in the On state (e.g. Show only employees).
...
Please refer to Field Validation for more information.
...
Transitions
There should be a smooth transition between the two states. See code below.
...
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 two options.
where the user has to perform several actions before the change will become effective → use Checkboxes instead.
where the change is visible as soon as the action was performed → use Checkboxes instead. For example, to show or hide certain rows in a data table or data sets in a chart.
Inside a form → use Radio Buttons or a single Checkbox instead.
...