Selectors (Toggle)
A toggle is a digital on/off switch used for binary actions and should immediately take effect when triggered.
Variants
/Toggle%20Variants.png)
| Variant | Usage |
|---|---|
|
Off |
Use this as the default state of a toggle. |
|
On |
Use this to indicate that the toggle has been switched on. |
|
Disabled |
Use this when the toggle is not applicable. |
Anatomy
Toggles are made up of the following:
- Fill Container
- Switch
/Toggle%20Anatomy.png)
Size
Toggles have a width of 49px and a height of 28px.
/Toggle%20Size.png)
Dos and Don'ts
/Toggle%20Dont.png)
Toggle switches should take immediate effect without requiring futher action from the user to save its state. Keep labels of toggle pre and post trigger the same. The movement of the slider as well as the contrasting colour should form as a visual cue to the user that a switch has been turned on.
/Toggle%20Dont-1.png)
Ensure that toggle switches are used consistently throughout an application i.e. there should not be an inconsistency between the usage of radio/check boxes and toggle switches as users would have to slow down to think about how to interact with the components.