Switch
A switch component for toggling between two states. Built on Radix UI primitives with smooth animations. Perfect for settings, preferences, and feature toggles.
Installation
Import
Usage
Use Switch for binary toggles in settings, preferences, and feature flags. Prefer Switch over Checkbox when the action is immediate and doesn't require form submission. Always pair with descriptive labels. Use controlled state for form integration.
Design Guidelines
Maintain consistent switch styling throughout your application. Use switches for immediate actions and toggles. Group related switches visually. Provide clear labels and optional descriptions. Use appropriate spacing in settings panels.
Basic Usage
Simple switch with label
States
Different switch states
Controlled Switch
Switch with controlled state
Notification Settings
Comprehensive notification preferences
Privacy Settings
Privacy and security preferences
Form Integration - Settings Form
Settings form with controlled switches for form submission
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled checked state |
defaultChecked | boolean | — | Uncontrolled default checked state |
onCheckedChange | (checked: boolean) => void | — | Callback fired when checked state changes |
disabled | boolean | false | Whether the switch is disabled |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
Accessibility
Accessibility features and considerations
Switch includes proper ARIA attributes. Always associate with labels using htmlFor/id. Screen readers announce checked state. Keyboard accessible with Space to toggle. Provide clear labels that describe what the switch controls.