On this page
Props
<Switch>
<SwitchControl />
<Label>Airplane mode</Label>
</Switch>Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/switchUsage
Use switch for communicating activation (e.g. on/off states), while checkboxes are best used for communicating selection (e.g. multiple table rows).
import { Label } from '@/components/ui/field'
import { Switch, SwitchControl } from '@/components/ui/switch'<Switch>
<SwitchControl />
<Label>Focus mode</Label>
</Switch>Examples
Standalone
Basic
With Description
Silence notifications so you can stay in flow.
Disabled
Read Only
Sizes
Controlled
You are on focus mode.
Card
API Reference
Switch
A switch allows a user to turn a setting on or off.
| Prop | Type | Default | |
|---|---|---|---|
"lg" | "md" | "sm" | 'md' | ||
ReactNode | function | — | ||
boolean | — | ||
RefObject<HTMLInputElement | null> | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
function | — | ||
SwitchControl
The control element of a switch.
| Prop | Type | Default | |
|---|---|---|---|
"lg" | "md" | "sm" | 'md' | ||
ReactNode | function | — | ||
SwitchIndicator
SwitchThumb
Last updated on 6/16/2026