<Switch>
<SwitchIndicator />
<Label>Focus mode</Label>
</Switch>npx shadcn@latest add @dotui/switchUse switch for communicating activation (e.g. on/off states), while checkboxes are best used for communicating selection (e.g. multiple table rows). Switches, unlike checkboxes, can't have an error state.
import { Switch } from "@/components/ui/switch";<Switch>Focus mode</Switch>Use the controls below to experiment with different switch props and see the live preview and code update.
The size of the switch.
"sm" | "md" | "lg"<Switch>
<SwitchIndicator>
<SwitchThumb />
</SwitchIndicator>
<Label>Airplane mode</Label>
</Switch>A switch allows a user to turn a setting on or off.
| Prop | Type | Default | |
|---|---|---|---|
"default" | 'default' | ||
"sm" | "md" | "lg" | 'md' | ||
RefObject<HTMLInputElement | null> | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
ReactNode | function | — | ||
function | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.