Switch - Usage

Basic Guidelines

The Switch is a two-state component, best suited for changing system settings or preferences (e.g. changing account marketing settings that don’t require a submit button or visual changes such as dark mode).

When the user interacts with the Switch, the change should take immediate effect and therefore should not be paired with a save or confirm button.

A Switch used to turn personalised adverts on and off. Once clicked the change is immediate and does not need a submit button to take action.

A Switch used for adding a product. This isn’t an immediate action and needs a confirmation button before the user proceeds.

Alignment

Multiple Switches stacked

We recommend a 24px gap when stacking Switches to allow for an accessible tap area of 44px.

Switch with additional in-line messaging

When pairing a Switch with additional in-line messaging please use body/body-small text style to remain consistent with Text Input, Textarea and Select components.

An 8px gap should be used between the Switch and the in-line messaging.

Switch label

Every Switch needs a clearly defined label so the user knows what action will happen when they click/tap the Switch. The label can be aligned to the left or right, or turned off entirely if needed, however please make sure there is always a nearby, clear label associated with the Switch.

This label makes it clear to the user what will happen when they turn the switch on or off.