Switch controls for enabling or disabling a single setting. Toggles provide immediate visual feedback with smooth spring physics animation. Use toggles for binary on/off states where the change takes effect immediately without requiring a save action.
Physics: The toggle thumb uses spring easing (cubic-bezier(0.34, 1.56, 0.64, 1)) for a bouncy, tactile feel. The track color transitions smoothly while the thumb slides with slight overshoot.
Simple toggle with a label for on/off settings.
Manage toggle state with React state for controlled behavior.
Start with the toggle in the on state.
Add text labels inside the toggle track to clarify the state.
Add additional context below the toggle.
Indicate an issue with the toggle setting.
Confirm the setting has been applied successfully.
Disable interaction for readonly or unavailable settings.
Use the variant prop for different visual emphasis.
Compare all three sizes for different use cases.
Common pattern for a settings page with multiple toggles.
Use toggles for enabling/disabling features in admin panels.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | - | Controlled on state |
defaultChecked | boolean | false | Initial on state (uncontrolled) |
onChange | (e: ChangeEvent) => void | - | Native change event handler |
onCheckedChange | (checked: boolean) => void | - | Convenience handler with boolean value |
label | ReactNode | - | Label text |
onLabel | ReactNode | - | Text shown in track when on |
offLabel | ReactNode | - | Text shown in track when off |
helperText | string | - | Helper text below toggle |
variant | 'default' | 'success' | 'error' | 'default' | Visual variant styling |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Toggle size |
disabled | boolean | false | Disable the toggle |
role="switch" for proper semanticsaria-checked to announce state| Use Toggle When | Use Checkbox When |
|---|---|
| Change takes effect immediately | Change requires a save/submit action |
| Single on/off setting | Multiple independent options |
| Settings/preferences panel | Form with submit button |
| Mobile-like interfaces | Traditional desktop forms |