Switch

Usage

A switch is used when users need to make a binary choice. It can be used to allow users to turn one functionality on or off (e.g. start or stop something). It can be used with or without the text label.

The switch without a label can be used inside data grids to activate or deactivate items or to control the status of the entire page. As the switch provides an immediate effect, it should not require the user to click Save or Submit to apply the new state, so the use of switch inside a form is not recommended.

Best Practices

• Use the switch for handling actions that should take an immediate effect

• Add clear label next to the switch to indicate the chosen status and avoid state-action ambiguity

• Avoid using the switch component inside forms; use a check box instead

Size

The switch comes in one size only, slightly bigger than a check box. To ensure better accessibility, the text label accompanying the switch state should also be interactive and influence the switch state.

States

• Switch handle is always white, with a slight shadow

• Enabled On state background colour is Sky Blue Base

• Hover On state background colour is Sky Blue D20

• Enabled Off state background colour is Grey L50

• Hover Off state background colour is Grey L30

• Disabled state is Grey L80

• Validation states are the same as buttons; Red Base background and Red L40 focus colour