Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback



Control that allows users to turn on or off item



A switch toggles the state of a setting (between on and off). Switches and checkboxes can often be used interchangeably, but the switch provides a more explicit, visible representation on a setting.

switch anatomy guideline
  1. Track : the track is an element used to guide the Thumb between alternating states.
  2. Thumb : the Thumb is a circular element on the switch that the user interacts with to turn something on or off.


Switch are very flexible components that can be placed anywhere you need to provide a user with an on and off option if used correctly.

Common places switch appear: Forms, settings pages, Modals etc

When to use

  • To enable users to change a single setting.
  • When the result of turning the setting on and off is clear.
  • For changes that have an instant response.

When not to use

  • To present multiple options.
  • For settings that require additional help or error handling.
  • For changes that require an additional confirmation.


All switch types display their state (on or off) through different methods and locations. It should be visible at a glance if a switch has been selected, and selected items should be more visually prominent than unselected items.


Always maintain a minimum 20 pixel margin between Switch or components so that they do not become lost.

Alt text

Do : On & off item option

Use Switches to provide multiple on and off options for a set of items

Alt text

Don't : Multiple item option

Use Radios to provide on and off functionality for a set of items


When creating switch :

  • Use a basic switch by default unless space is limited, then use a switch without a label.
  • Add a form label in front of your switch to specify what setting a switch turns on or off, such as Wi-fi or Bluetooth.
  • If you’re using a basic switch, add switch labels to clarify between toggled settings, such as On and Off.
  • Don’t include the state of a switch in a label if you’re using a switch with a label and a checkmark.
  • Don’t use a switch if the options you’re presenting to the user are anything other than “on” / “off.” Instead, use radio buttons.
Alt text

Do : Spesific context

Use a switch for situations where you are turning a series of one or more independent options on or off

Alt text

Don't : Long context item

Use checkbox for situation where you can turning a series of one or more independent options on or off