<Switch>
<SwitchIndicator />
<Label>Focus mode</Label>
</Switch>pnpm dlx 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"A switch allows a user to turn a setting on or off.
| Prop | Type | Default | |
|---|---|---|---|
| | ||
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Dynamic(Switch)>
<Dynamic(SwitchIndicator)>
<Dynamic(SwitchThumb) />
</Dynamic(SwitchIndicator)>
<Dynamic(Label)>Airplane mode</Dynamic(Label)>
</Dynamic(Switch)>