---
title: Toggle Switch
navTitle: Toggle Switch
summaryParagraph: A Toggle Switch lets people turn a single setting on or off immediately.
tags: ["Toggle button", "Switch", "Toggle"]
needToKnow:
- Toggle Switch labels must include a verb. E.g. Show translations
- The label should never be on both sides (e.g. On/Off).
demoStoryId: toggleswitchfield-react--on-kaizen-site-demo
---

## Visuals

### UI Kit

<iframe style="border: none;" width="744" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe3TyAOZKfLg9cA01Iy1Mgm%2FKaizen-Site-embed%3Fnode-id%3D1412%253A1819" allowfullscreen></iframe>

## To keep in mind

*   Toggles are made up of two states: On (green, always on the right) & Off (grey, always on the left)
*   The label must include a verb. E.g. Show translations [Toggle]
*   Labels can be positioned to the left or right of a toggle, depending on layout constraints. 
*   The label should never be on both sides (e.g. On/Off).
*   Toggle switches can be triggered by a drag gesture.
*   In RTL documents, the toggle switch and label are both flipped

## When to use

*   When space is tight
*   Applies to a single setting. When it’s instantly applied (the page doesn’t require a save trigger), as opposed to a Checkbox, which would require a save to action.

## When not to use

*   If there are more than 1 setting / option, such as filter settings, consider using [Checkboxes](/components/checkboxes)

## See also

See also [Checkboxes](/components/checkboxes)

## External Links

- [NNGroup toggle switch guidelines](https://www.nngroup.com/articles/toggle-switch-guidelines/)
- [Checkbox and Toggle in forms](https://uxplanet.org/checkbox-and-toggle-in-forms-f0de6086ac41)
- [Checkbox vs Toggle](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8)
- [Toggle switch labels](https://ux.stackexchange.com/questions/113633/should-a-toggle-switchs-label-be-on-its-left-or-right)
- [Smashing Magazine: inclusive toggle buttons](https://www.smashingmagazine.com/2017/09/building-inclusive-toggle-buttons/)
- [Material: orm fields](https://material.io/develop/web/components/input-controls/form-fields/)
- [MDN: Switch role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role)
- [Accessibility and toggle button switch](https://scottaohara.github.io/a11y_styled_form_controls/src/toggle-button-switch/)
- [React switch](https://www.npmjs.com/package/react-switch)
- [Toggle switch in React](https://scotch.io/tutorials/build-a-custom-toggle-switch-with-react)
- [Checkbox vs Toggle in forms](https://ux.stackexchange.com/a/113640)