---
title: "Switch — Usage"
canonical: https://sky-ui.cf.sky.com/components/switch/usage
---

# Switch — Usage

Switch toggles the state of an item on or off.

## 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](/components/text-input/), [Textarea](/components/textarea/) and [Select](/components/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.
  
    This label isn’t specific about what setting will be affected when the
      Switch is turned on or off.

## Examples in use