Switch
A control that allows the user to toggle between on and off states.
Installation
npx radk add switchUsage
import { Switch } from "@/components/ui/switch"<Switch />Examples
With Label
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
<div className="flex items-center space-x-2">
<Switch id="notifications" />
<Label htmlFor="notifications">Email notifications</Label>
</div>Disabled
<div className="flex items-center space-x-2">
<Switch id="airplane" disabled />
<Label htmlFor="airplane" className="text-muted-foreground">
Airplane mode
</Label>
</div>Controlled
"use client"
import { useState } from "react"
export function SwitchControlled() {
const [enabled, setEnabled] = useState(false)
return (
<div className="flex items-center space-x-2">
<Switch
id="mode"
checked={enabled}
onCheckedChange={setEnabled}
/>
<Label htmlFor="mode">{enabled ? "On" : "Off"}</Label>
</div>
)
}