Version 4 beta
Forma 36 v4 beta is availableClick here to go to the new version
Forma 36

Switch

StorybookGithub
stable

Switch is a control that is used to quickly switch between two possible states. Switch works like a physical switch that allows users to turn things on or off, like a light switch.

Table of contents

How to use Switch

  • use when a setting requires an on/off or show/hide function to display the results
  • use when user needs to perform instantaneous actions that do not need a review or confirmation
  • use when user is toggling independent features or behaviors

Switch vs Checkbox

Switch is a two-step action: selection and execution, whereas checkbox is just selection of an option and its execution usually requires another control.

Code examples

Switch disabled

Accessibility

  • use clear and concise label for Switch component
  • if needed provide additional information for the user if Switch will cause a change in the context