Switch

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
• Code examples
• Content recommendations
• Accessibility

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 id="testSwitch" labelText="label for switch" />
<Switch id="testSwitch" labelText="label for switch" />
Hide source

Switch disabled

<Switch id="testSwitch" labelText="label for switch" isDisabled />
<Switch id="testSwitch" labelText="label for switch" isDisabled />
Hide source

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