Switch React-only

Open in Storybook Open in Figma

Switch serves as a toggle to turn something on or off.

Usage

The Switch might seem similar to a CheckboxInput since both control a binary yes or no state of something. However, each of them serves its own purpose.

Flipping Switch should take effect immediately, the same as a physical light switch. Toggles for enabling New Overview, Contactless Payments, or Dark mode would be all solid candidates for the use of Switch.

CheckboxInput is a form element, which should not trigger an instant change. Just the same as when someone is filling out a paper form — it takes action only after they submit it.

Label

The Switch doesn’t contain a label. You can either tie it up to your own label using aria-labelledby or use it in a FormField.