---
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
---
<Label class="inline-flex items-center gap-3">
<Switch name="airplane-mode" />
Airplane mode
</Label>Installation
npx shadcn@latest add @fulldev/switchUsage
---
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
---<Label>
<Switch name="notifications" />
Notifications
</Label>Label a switch by wrapping it in Label. Switch renders a span, which
Label for cannot point to.
Examples
---
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
---
<Label class="w-full max-w-sm items-start gap-3">
<Switch name="marketing-emails" defaultChecked />
<span class="flex flex-col gap-1 leading-snug">
Marketing emails
<span class="text-muted-foreground font-normal">
Receive occasional updates about new features and product news.
</span>
</span>
</Label>With Label
Card-style selection where FieldLabel wraps the switch and its text, so the
whole card is the click target.
---
import { FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
---
<div class="w-full max-w-md">
<FieldLabel
class="has-[:focus-visible]:border-ring has-[:focus-visible]:ring-ring/50 hover:bg-muted/50 w-full items-start gap-3 rounded-md border p-3 has-[:focus-visible]:ring-3"
>
<Switch name="automatic-updates" defaultChecked />
<span class="flex flex-col gap-1">
Automatic updates
<span class="text-muted-foreground font-normal">
Keep your workspace up to date without manual installs.
</span>
</span>
</FieldLabel>
</div>Disabled
Add the disabled prop to the Switch component to disable the switch, and
dim its text for styling.
---
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
---
<Label class="w-full max-w-sm items-start gap-3">
<Switch name="security-alerts" disabled />
<span class="flex flex-col gap-1 leading-snug opacity-50">
Security alerts
<span class="text-muted-foreground font-normal">
This setting is managed by your organization.
</span>
</span>
</Label>Sizes
Use the size prop to change the size of the switch.
---
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
---
<div class="flex flex-col gap-4">
<Label class="inline-flex items-center gap-3">
<Switch size="sm" name="switch-size-sm" />
Small
</Label>
<Label class="inline-flex items-center gap-3">
<Switch size="default" name="switch-size-default" defaultChecked />
Default
</Label>
</div>API Reference
See the GitHub source code for more information on props. See the data-slot docs for more information on interactivity.