Checkbox

1import * as React from "react"2import { Card, CardContent } from "@/components/ui/card"3import { Checkbox } from "@/components/ui/checkbox"4import { cn } from "@/lib/utils"56export function Example() {7  const [checked, setChecked] = React.useState(false)89  return (10    <>11      <label className="flex items-center gap-2.5 text-sm tracking-wide">12        <Checkbox defaultChecked id="basic" />13        Sync local registry on save14      </label>15      <label className="flex items-start gap-2.5">16        <Checkbox id="described" className="mt-0.5" />17        <span className="grid gap-1">18          <span className="text-sm font-medium tracking-wide">19            Watch theme tokens20          </span>21          <span className="text-sm text-muted-foreground">22            Rebuild docs when CSS variables change under globals.css.23          </span>24        </span>25      </label>26      <label className="flex items-center gap-2.5 text-sm tracking-wide opacity-60">27        <Checkbox disabled id="disabled" />28        Publish package — unlock after review29      </label>30      <label className="block w-full cursor-pointer">31        <Card className={cn("py-0", !checked && "bg-transparent")}>32          <CardContent className="flex items-start gap-2.5 py-3">33            <Checkbox34              id="card"35              checked={checked}36              onCheckedChange={setChecked}37              className="mt-0.5"38            />39            <span className="grid gap-1">40              <span className="text-sm font-medium tracking-wide">41                Include in docs build42              </span>43              <span className="text-sm text-muted-foreground">44                Ships markdown, demos, and tokens with the registry export.45              </span>46            </span>47          </CardContent>48        </Card>49      </label>50    </>51  )52}

1import * as React from "react"2import { Card, CardContent } from "@/components/ui/card"3import { Checkbox } from "@/components/ui/checkbox"4import { cn } from "@/lib/utils"56export function Example() {7  const [checked, setChecked] = React.useState(false)89  return (10    <>11      <label className="flex items-center gap-2.5 text-sm tracking-wide">12        <Checkbox defaultChecked id="basic" />13        Sync local registry on save14      </label>15      <label className="flex items-start gap-2.5">16        <Checkbox id="described" className="mt-0.5" />17        <span className="grid gap-1">18          <span className="text-sm font-medium tracking-wide">19            Watch theme tokens20          </span>21          <span className="text-sm text-muted-foreground">22            Rebuild docs when CSS variables change under globals.css.23          </span>24        </span>25      </label>26      <label className="flex items-center gap-2.5 text-sm tracking-wide opacity-60">27        <Checkbox disabled id="disabled" />28        Publish package — unlock after review29      </label>30      <label className="block w-full cursor-pointer">31        <Card className={cn("py-0", !checked && "bg-transparent")}>32          <CardContent className="flex items-start gap-2.5 py-3">33            <Checkbox34              id="card"35              checked={checked}36              onCheckedChange={setChecked}37              className="mt-0.5"38            />39            <span className="grid gap-1">40              <span className="text-sm font-medium tracking-wide">41                Include in docs build42              </span>43              <span className="text-sm text-muted-foreground">44                Ships markdown, demos, and tokens with the registry export.45              </span>46            </span>47          </CardContent>48        </Card>49      </label>50    </>51  )52}

1import * as React from "react"2import { Card, CardContent } from "@/components/ui/card"3import { Checkbox } from "@/components/ui/checkbox"4import { cn } from "@/lib/utils"56export function Example() {7  const [checked, setChecked] = React.useState(false)89  return (10    <label className="block w-full cursor-pointer">11      <Card className={cn("py-0", !checked && "bg-transparent")}>12        <CardContent className="flex items-start gap-2.5 py-3">13          <Checkbox14            id="card-option"15            checked={checked}16            onCheckedChange={setChecked}17            className="mt-0.5"18          />19          <span className="grid gap-1">20            <span className="text-sm font-medium tracking-wide">21              Include in docs build22            </span>23            <span className="text-sm text-muted-foreground">24              Ships markdown, demos, and tokens with the registry export.25            </span>26          </span>27        </CardContent>28      </Card>29    </label>30  )31}

1import * as React from "react"2import { Checkbox } from "@/components/ui/checkbox"34export function Example() {5  const [checked, setChecked] = React.useState(false)67  return (8    <label className="flex items-center gap-2.5 text-sm tracking-wide">9      <Checkbox10        id="dark-preview"11        checked={checked}12        onCheckedChange={setChecked}13      />14      Preview docs in dark mode {checked ? "(on)" : "(off)"}15    </label>16  )17}

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

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

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

1import * as React from "react"2import { Checkbox } from "@/components/ui/checkbox"34const items = [5  { id: "docs", label: "Markdown pages" },6  { id: "demos", label: "Live demos" },7  { id: "tokens", label: "Theme tokens" },8  { id: "changelog", label: "Changelog entries" },9] as const1011export function Example() {12  const [selected, setSelected] = React.useState<string[]>(["docs", "demos"])1314  function toggle(id: string, next: boolean) {15    setSelected((prev) =>16      next ? [...prev, id] : prev.filter((entry) => entry !== id),17    )18  }1920  return (21    <div className="grid gap-3">22      <div className="grid gap-1">23        <p className="text-sm font-medium tracking-wide">24          Include in the docs build25        </p>26        <p className="text-sm text-muted-foreground">27          Pick what ships when you run the registry export.28        </p>29      </div>30      <div className="grid gap-2.5">31        {items.map((item) => (32          <label33            key={item.id}34            className="flex items-center gap-2.5 text-sm tracking-wide"35          >36            <Checkbox37              id={item.id}38              checked={selected.includes(item.id)}39              onCheckedChange={(next) => toggle(item.id, next)}40            />41            {item.label}42          </label>43        ))}44      </div>45    </div>46  )47}

1import * as React from "react"2import { Checkbox } from "@/components/ui/checkbox"34const parts = [5  { id: "button", label: "Button" },6  { id: "badge", label: "Badge" },7  { id: "alert", label: "Alert" },8] as const910export function Example() {11  const [selected, setSelected] = React.useState<string[]>(["button"])1213  const allChecked = selected.length === parts.length14  const someChecked = selected.length > 0 && !allChecked1516  function toggleAll(next: boolean) {17    setSelected(next ? parts.map((part) => part.id) : [])18  }1920  function toggle(id: string, next: boolean) {21    setSelected((prev) =>22      next ? [...prev, id] : prev.filter((entry) => entry !== id),23    )24  }2526  return (27    <div className="grid gap-3">28      <label className="flex items-center gap-2.5 text-sm font-medium tracking-wide">29        <Checkbox30          id="all-parts"31          checked={allChecked ? true : someChecked ? "indeterminate" : false}32          onCheckedChange={toggleAll}33        />34        Export UI parts35      </label>36      <div className="ms-6 grid gap-2.5">37        {parts.map((part) => (38          <label39            key={part.id}40            className="flex items-center gap-2.5 text-sm tracking-wide"41          >42            <Checkbox43              id={part.id}44              checked={selected.includes(part.id)}45              onCheckedChange={(next) => toggle(part.id, next)}46            />47            {part.label}48          </label>49        ))}50      </div>51    </div>52  )53}