Overview
Off
On
Disabled off
Disabled on
Installation
Usage
Variants
Basic
Enable dark mode
On by Default
Email notifications
With Description
Auto-save
Automatically save your work every 5 minutes.
Label on Left
Show sidebar
Disabled
Beta features
Always-on feature
Controlled
API Reference
boolean
Controlled checked state.
boolean
default:"false"
Uncontrolled initial state.
(checked: boolean) => void
Callback fired when the switch state changes.
string
Label text displayed next to the switch.
string
Supporting description shown below the label.
string
default:"right"
Position of the label relative to the switch. Values:
left · rightboolean
default:"false"
Disables the switch and applies the disabled visual style.
string
Additional Tailwind classes for custom overrides.
Accessibility
- Switch uses
role="switch"witharia-checkedfor proper screen reader announcement - Label is associated via
htmlFor/id— clicking the label also toggles the switch descriptionis linked viaaria-describedbydisableduses the nativedisabledattribute, removing the element from tab order- Space bar toggles the switch when focused — follows ARIA switch pattern
- Focus ring meets WCAG 2.1 AA contrast requirements
Do’s & Don’ts
Do
- Use Switch for settings that take immediate effect (dark mode, notifications)
- Always provide a descriptive label — never a switch alone
- Use
descriptionto clarify the impact of toggling - Place switches in settings panels or preference pages
Don't
- Don’t use Switch inside a form that requires submission — use Checkbox instead
- Don’t use Switch for multi-select scenarios — use Checkbox Group
- Don’t use ambiguous labels like “On/Off” — describe what is being toggled
- Don’t disable without explaining why in nearby helper text