- packages.styleProps.title
- uiCategories.interactiveElements.components.buttons
- uiCategories.interactiveElements.components.links
- uiCategories.interactiveElements.components.inputs
- uiCategories.interactiveElements.components.checkbox
- uiCategories.interactiveElements.components.radioGroup
- uiCategories.interactiveElements.components.select
- uiCategories.interactiveElements.components.switch
- uiCategories.interactiveElements.components.textarea
- uiCategories.interactiveElements.components.label
- uiCategories.interactiveElements.components.autocomplete
- uiCategories.interactiveElements.components.calendar
- uiCategories.interactiveElements.components.timePicker
- uiCategories.interactiveElements.components.datePicker
- uiCategories.interactiveElements.components.pagination
- uiCategories.interactiveElements.components.progressBar
- uiCategories.interactiveElements.components.skeleton
- uiCategories.interactiveElements.components.statusButton
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
packages.sections.api
Component props and API reference 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. For detailed documentation and examples, see the Style Props documentation.
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.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 | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
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.