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.


  1. Toggle
  2. Label






  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








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