Switch

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

<div className="flex items-center gap-2">
  <Switch id="my-switch" />
  <Label htmlFor="my-switch">Enable feature</Label>
</div>

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

<Switch disabled />
<Switch disabled defaultChecked />

<Field orientation="horizontal">
  <Switch id="notifications" />
  <FieldContent>
    <FieldLabel htmlFor="notifications">Push notifications</FieldLabel>
    <FieldDescription>Receive alerts for new messages and updates.</FieldDescription>
  </FieldContent>
</Field>

<Field orientation="horizontal" data-invalid>
  <Switch id="terms" aria-invalid />
  <FieldContent>
    <FieldLabel htmlFor="terms">Accept terms and conditions</FieldLabel>
    <FieldError>You must accept the terms to continue.</FieldError>
  </FieldContent>
</Field>

<div className="grid gap-3">
  <FieldLabel>
    <Field orientation="horizontal">
      <Switch id="email" defaultChecked />
      <FieldContent>
        <FieldLabel htmlFor="email">Email notifications</FieldLabel>
        <FieldDescription>Get notified when someone mentions you.</FieldDescription>
      </FieldContent>
    </Field>
  </FieldLabel>
  <FieldLabel>
    <Field orientation="horizontal">
      <Switch id="marketing" />
      <FieldContent>
        <FieldLabel htmlFor="marketing">Marketing emails</FieldLabel>
        <FieldDescription>Receive emails about new products and features.</FieldDescription>
      </FieldContent>
    </Field>
  </FieldLabel>
</div>

<Switch size="compact" />
<Switch size="default" />

npx shadcn@latest add https://solar-ui.com/r/switch.json

npm install @radix-ui/react-switch

"use client"
 
import * as React from "react"
import * as SwitchPrimitive from "@radix-ui/react-switch"
import { cn } from "@/lib/utils"
 
// Root: h-5 w-9 rounded-full, checked=bg-primary, unchecked=bg-input
// Thumb: size-4 bg-background, translate-x-0 -> translate-x-4