Toggle control for binary states. Perfect for settings, preferences, and feature toggles with full keyboard navigation and RTL support.
Preview
Installation
Usage
Examples
With Label
Settings Panel
Receive emails about new products and features
Receive emails about your account security
Receive emails about product updates and announcements
Disabled State
Controlled Component
Status: Off
In Forms
Props
| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | The controlled checked state of the switch |
defaultChecked | boolean | false | The default checked state (uncontrolled) |
onCheckedChange | (checked: boolean) => void | undefined | Event handler called when the checked state changes |
disabled | boolean | false | Disables the switch |
required | boolean | false | Marks the switch as required |
name | string | undefined | The name of the switch for form submission |
Accessibility
Keyboard Navigation
- Tab: Move focus to/from switch
- Space: Toggle switch state
Always Use Labels
Always pair switches with labels using the htmlFor and id attributes. This provides clear context about what the switch controls.
Screen Readers
The switch role is automatically announced with its current state (on/off). The label describes what the switch controls.
Visual Feedback
Switches provide clear visual feedback through color, position, and animation to indicate their state.
RTL Considerations
Switches automatically support RTL layout. The switch thumb animates in the correct direction, and labels align properly in both directions.
Use Cases
Instant on/off toggles (dark mode, notifications)
Feature flags in settings panels
Privacy and preference controls
Accessibility preferences (reduce motion, contrast)
Best Practices
Do
- ✓ Apply changes immediately — no submit button needed
- ✓ Use clear labels describing what happens when enabled
- ✓ Show the current state visually (color, position)
Don't
- ✗ Don't use for choices that require confirmation — use Checkbox in a form
- ✗ Don't use for multi-option selections
- ✗ Don't change the label text based on state