{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "title": "Checkbox",
  "description": "A checkbox for a yes or no choice, or for picking several items from a list.",
  "dependencies": [
    "lucide-react@^1.48.0",
    "radix-ui@^1.6.7"
  ],
  "registryDependencies": [
    "https://blank.vageshwar.dev/r/theme.json",
    "https://blank.vageshwar.dev/r/field.json",
    "https://blank.vageshwar.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "ui/checkbox.tsx",
      "type": "registry:ui",
      "content": "// BlankUI: checkbox. Managed by BlankUI. Read checkbox.md before editing. Wrap in <Field orientation=\"horizontal\">.\nimport type { ComponentProps } from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\nimport { Check, Minus } from \"lucide-react\"\nimport { useFieldControl } from \"@/components/ui/field\"\nimport { cn } from \"@/lib/utils\"\n\nexport type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>\n\n/**\n * A checkbox. Use `checked` and `onCheckedChange` (not `onChange`).\n * `checked` can be `true`, `false` or `\"indeterminate\"`.\n *\n * @example\n * <Field label=\"Email me about new features\" orientation=\"horizontal\">\n *   <Checkbox checked={subscribed} onCheckedChange={(v) => setSubscribed(v === true)} />\n * </Field>\n */\nexport function Checkbox({ className, ...props }: CheckboxProps) {\n  const wired = useFieldControl(props)\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer size-4 shrink-0 cursor-pointer rounded-sm border border-input bg-surface shadow-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n        className,\n      )}\n      {...wired}\n    >\n      <CheckboxPrimitive.Indicator className=\"flex items-center justify-center\">\n        {props.checked === \"indeterminate\" ? (\n          <Minus className=\"size-3.5\" />\n        ) : (\n          <Check className=\"size-3.5\" />\n        )}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n"
    },
    {
      "path": "ui/checkbox.md",
      "type": "registry:ui",
      "content": "---\nname: checkbox\ntitle: Checkbox\ndescription: A checkbox for a yes or no choice, or for picking several items from a list.\ncategory: form\nwhenToUse:\n  - A single yes or no choice, like agreeing to terms.\n  - Picking several options from a short list.\nwhenNotToUse:\n  - when: Picking exactly one option from a list.\n    use: select\n  - when: Triggering an action right away.\n    use: button\nrelated: [field, select]\nrequiredParts: [Checkbox]\nantiPatterns:\n  - avoid: '<input type=\"checkbox\">'\n    instead: \"<Checkbox>\"\n  - avoid: \"onChange={(e) => setValue(e.target.checked)}\"\n    instead: \"onCheckedChange={(checked) => setValue(checked === true)}\"\n  - avoid: '<Field label=\"...\"> (vertical) around a Checkbox'\n    instead: '<Field label=\"...\" orientation=\"horizontal\">'\n---\n\n# Checkbox\n\nBuilt on Radix. Use `checked` and `onCheckedChange`, not `onChange`. The value can be `true`, `false` or `\"indeterminate\"`.\n\n## Import\n\n```tsx\nimport { Checkbox } from \"@/components/ui/checkbox\"\n```\n\n## Example\n\n```tsx\n<Field label=\"Send me product updates\" orientation=\"horizontal\">\n  <Checkbox checked={updates} onCheckedChange={(checked) => setUpdates(checked === true)} />\n</Field>\n```\n\n## In a form\n\n```tsx\n<Field label=\"I agree to the terms\" orientation=\"horizontal\" required>\n  <Checkbox name=\"terms\" value=\"yes\" />\n</Field>\n```\n"
    }
  ],
  "docs": "Read components/ui/checkbox.md before using Checkbox. Docs: https://blank.vageshwar.dev/docs/checkbox",
  "meta": {
    "category": "form",
    "requiredParts": [
      "Checkbox"
    ],
    "related": [
      "field",
      "select"
    ]
  }
}