Switch

import { Switch } from "@/components/ui/switch";

import { Switch } from "@/components/ui/switch";

export function Example() {
  return <Switch label="Airplane mode" defaultChecked />;
}

Switch                            (single component — pass everything as props)
├── label={<ReactNode>}            (auto-emits a <Label htmlFor={id}>)
├── caption={<ReactNode>}          (helper text — switches to start-aligned)
├── variant="default" | "row" | "full" | "card"
│     default → label right of the switch (compact form layout)
│     row     → label left, switch right with settings-list spacing (divide-y stacks)
│     full    → label left, switch right, full-width plain row (no padding)
│     card    → bordered card with optional media, label/caption, switch on the right
├── media={<ReactNode>}            (image/icon — only rendered for variant="card")
├── size="default" | "sm"
└── ...rest                        (checked / defaultChecked / onCheckedChange / disabled / id / className)

Without label/caption, Switch renders bare — pair with your own <Label>
when you need a custom layout (theme switcher, icon flanks, etc).