{
  "schemaVersion": 1,
  "name": "checkbox",
  "useFor": "Use for independent on or off choices that apply when a form is submitted (event subscriptions, consent). Pair each checkbox with a Label 8px to its right. Use the indeterminate state for a parent that covers some of its children. For a setting that applies at once use Switch.",
  "constraints": [
    "A pink checked box",
    "A round checkbox",
    "A checkbox that acts immediately like a switch"
  ],
  "documentation": "",
  "source": "Extrapolated from the Inkbox console (Figma 427:2715): the radios' 18px size and gray edge, the action purple and the white checks",
  "exports": [
    "Checkbox"
  ],
  "client": true,
  "docsUrl": "https://inkbox-ds.vercel.app/components/checkbox",
  "markdownUrl": "https://inkbox-ds.vercel.app/r/checkbox.md",
  "examples": [
    {
      "path": "examples/checkbox.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Label } from \"@/components/ui/label\";\n\nconst EVENTS = [\"message.received\", \"message.sent\", \"message.delivered\"];\n\nexport function Preview() {\n  const [chosen, setChosen] = React.useState<string[]>([\"message.received\"]);\n  const all = chosen.length === EVENTS.length ? true : chosen.length ? \"indeterminate\" : false;\n  return (\n    <div className=\"grid gap-2.5\">\n      <div className=\"flex items-center gap-2\">\n        <Checkbox id=\"all-events\" checked={all} onCheckedChange={(v) => setChosen(v === true ? EVENTS : [])} />\n        <Label htmlFor=\"all-events\" className=\"font-medium\">All email events</Label>\n      </div>\n      <div className=\"grid gap-2.5 pl-6.5\">\n        {EVENTS.map((e) => (\n          <div key={e} className=\"flex items-center gap-2\">\n            <Checkbox id={e} checked={chosen.includes(e)} onCheckedChange={(v) => setChosen((c) => (v === true ? [...c, e] : c.filter((x) => x !== e)))} />\n            <Label htmlFor={e} className=\"font-mono\">{e}</Label>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport function States() {\n  return (\n    <div className=\"grid gap-2.5\">\n      <div className=\"flex items-center gap-2\">\n        <Checkbox id=\"c1\" />\n        <Label htmlFor=\"c1\">Unchecked</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Checkbox id=\"c2\" defaultChecked />\n        <Label htmlFor=\"c2\">Checked</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Checkbox id=\"c3\" checked=\"indeterminate\" />\n        <Label htmlFor=\"c3\">Some of them</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Checkbox id=\"c4\" disabled />\n        <Label htmlFor=\"c4\">Disabled</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Checkbox id=\"c5\" aria-invalid />\n        <Label htmlFor=\"c5\">I accept the Terms of Service (required)</Label>\n      </div>\n    </div>\n  );\n}\n",
      "exports": [
        "Preview",
        "States"
      ],
      "requires": [
        "checkbox",
        "label"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Preview",
          "url": "https://inkbox-ds.vercel.app/preview/checkbox/Preview"
        },
        {
          "name": "States",
          "url": "https://inkbox-ds.vercel.app/preview/checkbox/States"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Checkbox",
  "description": "An 18px box with 4px corners and a gray edge that fills purple with a white check.",
  "surface": "site",
  "kinds": [],
  "requires": [
    "theme",
    "utils"
  ],
  "packages": [
    "radix-ui",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "components/ui/checkbox.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport { CheckIcon, MinusIcon } from \"@phosphor-icons/react/ssr\";\n\nimport { cn } from \"@/lib/utils\";\n\n// Extrapolated from the console's radios and checks (Figma 427:2715): an 18px box with 4px corners and the radio's\n// 1.5px gray edge on white; checked or mixed it fills with the action purple and shows a bold white check (or dash).\n// Its label sits 8px away in 14px ink.\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer inline-flex size-4.5 shrink-0 cursor-pointer items-center justify-center rounded-xs border-[1.5px] border-line-strong bg-surface text-on-primary outline-none transition-[background-color,border-color] duration-150 ease-out hover:border-fg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator data-slot=\"checkbox-indicator\" className=\"group/indicator flex items-center justify-center text-current\">\n        <CheckIcon weight=\"bold\" className=\"size-3.5 group-data-[state=indeterminate]/indicator:hidden\" />\n        <MinusIcon weight=\"bold\" className=\"hidden size-3.5 group-data-[state=indeterminate]/indicator:block\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"
    }
  ]
}