{
  "name": "Checkbox",
  "type": "component",
  "description": "A checkbox, with CheckboxField pairing it to a label and help text.",
  "export": "Checkbox",
  "path": "@gtmi/strix-react/atoms/checkbox",
  "figma": null,
  "figmaAbsent": "Base UI primitive. Figma draws no checkbox at all.",
  "props": [
    {
      "name": "state",
      "type": "error",
      "description": "Paints the border and indicator in the error color. Published as data-state=\"error\"."
    },
    {
      "name": "checked",
      "type": "boolean",
      "description": "Controlled checked state. Use defaultChecked for uncontrolled."
    },
    {
      "name": "indeterminate",
      "type": "boolean",
      "description": "Mixed state: announces as aria-checked=\"mixed\" and shows the minus glyph."
    },
    {
      "name": "checkIcon",
      "type": "ReactNode",
      "default": "<CheckIcon size=\"sm\" />",
      "description": "Override the checked glyph."
    },
    {
      "name": "indeterminateIcon",
      "type": "ReactNode",
      "default": "<MinusIcon size=\"sm\" />",
      "description": "Override the indeterminate glyph."
    },
    {
      "name": "className",
      "type": "string",
      "description": "Merged through cn()."
    }
  ],
  "exports": [
    {
      "name": "CheckboxField",
      "type": "component",
      "description": "Checkbox + Label + optional HelpText, wired together with generated ids. Props: label, helperText, containerClassName, plus every Checkbox prop."
    }
  ],
  "ai_tags": ["checkbox", "form", "selection", "primitive"],
  "since": "0.2.0",
  "tokens_used": [
    "--color-border-neutral-semi-strong",
    "--color-border-hover",
    "--color-border-pressed",
    "--color-border-accent",
    "--color-border-error",
    "--color-border-disabled",
    "--color-border-focus",
    "--color-icon-accent",
    "--color-icon-accent-pressed",
    "--color-icon-error",
    "--color-icon-disabled",
    "--radius-xxs",
    "--spacing-borders-md",
    "--spacing-gap-200"
  ],
  "notes": "Renders a native <button> via Base UI's render + nativeButton rather than the default <span role=\"checkbox\">. That is what makes :disabled real and lets <label htmlFor> activate the control, which Label isSelector's peer-* styling depends on. Only the error state is published as data-state: upstream collapsed state and checkedness into one attribute, so an errored checkbox reported data-state=\"error\" and lost its checkedness while its own indicator styles needed both. Base UI already publishes data-checked and data-indeterminate. CheckboxField composes Label and HelpText instead of repeating their type classes, and places the control before the label because Tailwind's peer-* is a sibling combinator."
}