Switch

Introduction

A switch is a binary control that represents an immediate on/off state. It's visually similar to a physical light switch, and changing it typically applies the change instantly. Even though it has similarities to a Checkbox, a switch is used for different purposes.

Variants

• Basic Switch: The standard switch component used for simple on/off toggles.
• Switch Button: A switch styled to look like a button, available in regular and small sizes.
• Switch Card: A switch within a card layout, ideal for options that require additional context. For more information, go to the documentation of SwitchCard

Interactive demo

Try the interactive demo below to explore the switch component.

Usage

Use the Basic Switch for binary choices, without the need for form submission, like when:

• The user is turning a setting on or off.
• The change is immediate and doesn't require pressing a separate “Save” or “Submit” button.
• It is persistent and can be clearly described as “On” or “Off” (E.g: “Email notifications”, "Bluetooth" , “Flight mode”).

Labels

Use clear, static and descriptive labels. Do not change the label on the switch when the user toggles it, as it can create ambiguity. Use static labels + changing state. Example: "Flight mode" + switch state (off/on).

Label tips

• Keep the label stable and meaningful: "What is this setting about?"
• Use the switch state to indicate whether it is active.
• If additional explanation is needed, use you can use SwitchCard to provide more context.

Switch in components

Switch can be used within various components. See the links below for more information on how switch can be integrated with these components.