GitHub
DocsSwitch

Switch

A control that allows the user to toggle between on and off states.

Preview

Installation

npx shadcn@latest add switch

Usage

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">Enable notifications</Label>
</div>

Props

checked — controlled on/off state

defaultChecked — initial state (uncontrolled)

onCheckedChange — callback fired on toggle

disabled — disables the switch

SelectSlider