Components / Forms

Switch

A toggle switch built on Base UI for on/off settings. Pair it with a Label.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/switch/registry.json

Basic

Switch + Label

Email notifications

tsx

import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

<div className="flex items-center gap-2">
  <Switch id="notifications" defaultChecked />
  <Label htmlFor="notifications">Email notifications</Label>
</div>

States

off · on · disabled

tsx

<Switch />
<Switch defaultChecked />
{/* disabled switches are dimmed and the thumb is greyed */}
<Switch disabled />
<Switch disabled defaultChecked />

Variants

Use variant="destructive" for a dangerous toggle — the active track turns red instead of lime.

default · destructive

tsx

{/* destructive turns the active track red for dangerous toggles */}
<Switch variant="destructive" defaultChecked />

Switch props

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	Active-track colour. default = lime; destructive = red, for dangerous toggles.
checked	boolean	-	Controlled checked state.
defaultChecked	boolean	-	Uncontrolled initial checked state.
onCheckedChange	(checked: boolean) => void	-	Fires when the checked state changes.
disabled	boolean	-	Disables the switch; it dims and the thumb greys out.