Switch
A control that lets the user toggle between checked and not checked.
Installation
npx shadcn@latest add @uqudo/switchUsage
import { Switch } from "@/components/uqudo/ui/switch"<Switch />Pair it with a Label through id and htmlFor, and
control it with checked and onCheckedChange:
<div className="flex items-center gap-2">
<Switch
id="notifications"
checked={enabled}
onCheckedChange={setEnabled}
/>
<Label htmlFor="notifications">Notifications</Label>
</div>Examples
Sizes
Disabled
API Reference
Switch
Prop
Type
Data attributes
| Attribute | Element | Value |
|---|---|---|
data-slot | root / thumb | switch / switch-thumb |
data-size | root | The resolved size. |
data-state | root / thumb | checked or unchecked (from Radix). |
data-disabled | root / thumb | Present when disabled. |