Switch
Allows users to toggle a single setting instantly between on and off, behaving just like a physical light switch.
1.5 KB
•Updated on August 21, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/primitives-switchUsage
Code
import { Switch } from '@/components/ui/switch'Code
<Switch />Anatomy
Code
<Switch>
<SwitchThumb />
</Switch>Features
Sizes
Switch toggle controls in sm, default, and lg sizes.
Accessibility
- Follows the WAI-ARIA Switch Pattern.
Keyboard Interactions
| Key | Action |
|---|---|
| Space / Enter | Toggles the switch between on and off. |
API Reference
Switch
Styled wrapper for Switch.Root from Base UI with built-in thumb. Size is controlled via the --thumb-size CSS variable.
Examples
Switch card
Switch in form
Custom size switch
Weekly availability editor with time range combobox pickers
Weekly availability editor with grouped time range controls
Weekly availability editor with From/To labeled time groups