Overview

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
   The control for the Switch showing the status.

2. Track
   The container for the handle, which also helps to indicate the selection of the Switch.

3. Switch status
   Non-optional text indicator to clarify which state the Switch is in.

4. Label (optional)
   An optional label used to explaining the action of the Switch.

Variants & States

• Status: on/off
  
• States: Default, Hover, Focus, Disabled
  
• Label: None, Left, Right