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

# Switch

Switch toggles the state of an item on or off.

## Purpose

A Switch toggles the state of an item on or off with immediate effect.

## Anatomy

The Switch component can be broken down into the following elements -

1. **Handle** <br /> The control for the Switch showing the status.

2. **Track** <br /> The container for the handle, which also helps to indicate the selection of the Switch.

3. **Switch status** <br /> Non-optional text indicator to clarify which state the Switch is in.

4. **Label (optional)** <br /> An optional label used to explaining the action of the Switch.

## Variants & States

- Status: on/off<br />
- States: Default, Hover, Focus, Disabled<br />
- Label: None, Left, Right<br />

### Active On Switch with label
    
  ### Disabled Off Switch without label