Switch

A Radix-based toggle switch with lavender accent, smooth thumb transition, and accessible keyboard support.

Preview

Airplane Mode

Installation

npx shadcn@latest add @shadszn/switch

Usage

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

export default function Example() {
  return (
    <div className="flex items-center gap-3">
      <Switch id="notifications" />
      <Label htmlFor="notifications">Enable notifications</Label>
    </div>
  )
}

Controlled

const [enabled, setEnabled] = useState(false)

<Switch
  checked={enabled}
  onCheckedChange={setEnabled}
/>

Props

Prop	Type	Default	Description
checked	boolean	---	Controlled checked state.
onCheckedChange	(checked: boolean) => void	---	Callback when the switch is toggled.
disabled	boolean	false	Disables the switch.
className	string	---	Additional CSS classes.