Switch

Definition: A switch is an element that represents a binary state. It typically toggles an option on and off.

When to use

Use a switch for binary choices, toggling settings on/off and quick and simple user actions.

Anatomy

  1. Toggle
  2. Label

 

 

 

 

Variations

  1. Switch in small size
  2. Switch in large size
  3. Switch with a clear label indicating the state
  4. Custom switch in light mode
  5. Custom switch in dark mode

 

 

 

 

 

 

States

  1. Enabled
  2. Hover
  3. Focused
  4. Error