Switch

1import { Switch } from "@/components/ui/switch"23export function Example() {4  return (5    <label className="flex items-center gap-2.5 text-sm tracking-wide">6      Airplane mode7      <Switch id="airplane" />8    </label>9  )10}

1import { Switch } from "@/components/ui/switch"23export function Example() {4  return (5    <label className="flex w-full items-start justify-between gap-4">6      <span className="grid gap-1">7        <span className="text-sm font-medium tracking-wide">8          Watch theme tokens9        </span>10        <span className="text-sm text-muted-foreground">11          Rebuild docs when CSS variables change under globals.css.12        </span>13      </span>14      <Switch id="watch-tokens" className="mt-0.5" />15    </label>16  )17}

1import * as React from "react"2import { Card, CardContent } from "@/components/ui/card"3import { Switch } from "@/components/ui/switch"4import { cn } from "@/lib/utils"56export function Example() {7  const [docs, setDocs] = React.useState(true)8  const [registry, setRegistry] = React.useState(false)910  return (11    <div className="grid w-full gap-3">12      <label className="block w-full cursor-pointer">13        <Card className={cn("py-0", !docs && "bg-transparent")}>14          <CardContent className="flex items-start justify-between gap-4 py-3">15            <span className="grid gap-1">16              <span className="text-sm font-medium tracking-wide">17                Include in docs build18              </span>19              <span className="text-sm text-muted-foreground">20                Ships markdown, demos, and tokens with the registry export.21              </span>22            </span>23            <Switch24              id="card-docs"25              checked={docs}26              onCheckedChange={setDocs}27              className="mt-0.5"28            />29          </CardContent>30        </Card>31      </label>32      <label className="block w-full cursor-pointer">33        <Card className={cn("py-0", !registry && "bg-transparent")}>34          <CardContent className="flex items-start justify-between gap-4 py-3">35            <span className="grid gap-1">36              <span className="text-sm font-medium tracking-wide">37                Sync local registry38              </span>39              <span className="text-sm text-muted-foreground">40                Pull component updates when the registry changes.41              </span>42            </span>43            <Switch44              id="card-registry"45              checked={registry}46              onCheckedChange={setRegistry}47              className="mt-0.5"48            />49          </CardContent>50        </Card>51      </label>52    </div>53  )54}

1import { Switch } from "@/components/ui/switch"23export function Example() {4  return (5    <label className="flex items-center gap-2.5 text-sm tracking-wide opacity-60">6      Publish package — unlock after review7      <Switch id="publish-locked" disabled />8    </label>9  )10}

1import { Switch } from "@/components/ui/switch"23export function Example() {4  return (5    <label className="flex items-center gap-2.5 text-sm font-medium tracking-wide text-destructive">6      Accept the license7      <Switch id="license" aria-invalid />8    </label>9  )10}

1import { Switch } from "@/components/ui/switch"23export function Example() {4  return (5    <div className="flex w-44 flex-col gap-4">6      <label className="flex w-full items-center justify-between gap-4 text-sm tracking-wide">7        Small8        <Switch id="size-sm" size="sm" defaultChecked />9      </label>10      <label className="flex w-full items-center justify-between gap-4 text-sm tracking-wide">11        Default12        <Switch id="size-default" defaultChecked />13      </label>14    </div>15  )16}

1import { Switch } from "@/components/ui/switch"23export function Example() {4  return (5    <div className="flex w-52 flex-col gap-4">6      <label className="flex w-full items-center justify-between gap-4 text-sm tracking-wide">7        None8        <Switch id="radius-none" radius="none" defaultChecked />9      </label>10      <label className="flex w-full items-center justify-between gap-4 text-sm tracking-wide">11        Usual corners12        <Switch id="radius-default" defaultChecked />13      </label>14      <label className="flex w-full items-center justify-between gap-4 text-sm tracking-wide">15        Full16        <Switch id="radius-full" radius="full" defaultChecked />17      </label>18    </div>19  )20}