{
  "generatedFrom": "checkbox.contract.json",
  "component": "Checkbox",
  "slug": "checkbox",
  "group": "Forms",
  "tier": "leaf-lit",
  "summary": "Let a user turn one or more independent options on or off.",
  "install": {
    "package": "@ahaslides-product/design",
    "registry": "https://npm.pkg.github.com",
    "scope": "@ahaslides-product",
    "auth": "Published to GitHub Packages — needs a GitHub token with read:packages. Configure the @ahaslides-product scope in .npmrc before installing.",
    "npmrc": "@ahaslides-product:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages",
    "command": "npm i @ahaslides-product/design",
    "tokenLayer": "import '@ahaslides-product/design/tokens.css';",
    "import": "import '@ahaslides-product/design/aha-checkbox';",
    "element": "aha-checkbox",
    "registers": "aha-checkbox"
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/checkbox/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/checkbox/checkbox.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/checkbox.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/checkbox.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — <aha-checkbox> is a standard custom element that renders on open — React/Vue are thin adapters over the same element. Paste into an .html file and it renders with no build step.",
  "frameworks": {
    "react": {
      "via": "web-component",
      "ref": "aha-checkbox"
    },
    "vue": {
      "via": "web-component",
      "ref": "aha-checkbox"
    },
    "html": {
      "via": "web-component",
      "ref": "aha-checkbox",
      "runnable": "paste-and-run — no build step, renders on open"
    }
  },
  "props": [
    {
      "name": "checked",
      "type": "boolean",
      "default": "false",
      "desc": "Controlled selection"
    },
    {
      "name": "indeterminate",
      "type": "boolean",
      "default": "false",
      "desc": "Mixed state for check-all"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "default": "false",
      "desc": "Disables the control"
    },
    {
      "name": "change",
      "type": "CustomEvent<{checked}>",
      "default": "—",
      "desc": "Composed event; read e.detail.checked"
    }
  ],
  "tokens": [
    "color-primary",
    "checkbox-border",
    "bg-container",
    "bg-container-disabled",
    "border-disabled",
    "text-default",
    "text-disabled",
    "text-inverse",
    "purple-30",
    "font-product"
  ],
  "spec": [
    {
      "label": "Box",
      "value": "14×14 r4"
    },
    {
      "label": "Rest border",
      "value": "#B4BCCF"
    },
    {
      "label": "Hover border",
      "value": "#D3B4FF"
    },
    {
      "label": "Checked fill",
      "value": "#6A1EBB + white 12px tick"
    },
    {
      "label": "Label",
      "value": "Plus Jakarta 14/21"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "Checkbox",
        "when": "one or more independent options; applies on submit"
      },
      {
        "what": "Radio",
        "when": "exactly one from a small mutually-exclusive set"
      },
      {
        "what": "Switch",
        "when": "a single setting that takes effect immediately"
      }
    ],
    "note": "Labels are sentence case and state what the control does — 'Let participants join anonymously', not 'Join Anonymously'. Keep product nouns: Q&A, Word cloud.",
    "dsv3": "COVERED — enumerated from the DS V3 Checkbox component-set taxonomy (Checkbox · Checkbox-Input · Form-Item/Checkbox · TableCellControl): the family carries the three ticks (unchecked · checked · indeterminate/mixed) × rest/hover/disabled. The measured reference (contract.json cells checkbox|rest, |rest|hover, |checked, |disabled) enumerates NO size axis — DS V3 Checkbox is single-size (14×14 r4), so no `size` prop is stubbed. Token layer: white surface, checked fill color-primary #6A1EBB + white 12px tick, hover border purple-30 #D3B4FF, disabled bg-container-disabled #F1F1F1 / border-disabled #EBEBEB. a11y: host role=checkbox with aria-checked true/false/mixed synced from observedAttributes; the native <input> is aria-hidden so AT announces once; Space on the focusable host toggles. Motion on the persistent .box (never rebuilt on toggle)."
  },
  "surfaces": [
    "editor",
    "dashboard",
    "settings",
    "audience"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step.\n     <aha-checkbox> is the SAME shared custom element React and Vue consume.\n     Initial state is declarative (`checked`); it emits a composed `change` event. -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css\">\n<script type=\"module\">\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-checkbox.js';   // registers <aha-checkbox>\n</script>\n\n<aha-checkbox id=\"anon\" checked>Let participants join anonymously</aha-checkbox>\n\n<script>\n  // Plain DOM — no framework. Read e.detail.checked off the composed CustomEvent.\n  document.getElementById('anon').addEventListener('change', (e) => {\n    console.log('anonymous:', e.detail.checked);\n  });\n</script>\n",
    "react": "import '@ahaslides-product/design/aha-checkbox';   // registers <aha-checkbox>\nimport { useRef, useEffect } from 'react';\n\n// React 18 needs a thin wrapper; React 19 can use <aha-checkbox> directly.\nfunction AhaCheckbox({ checked, indeterminate, disabled, onChange, children }) {\n  const ref = useRef();\n  useEffect(() => {\n    const el = ref.current;\n    el.checked = !!checked;\n    el.indeterminate = !!indeterminate;\n    el.disabled = !!disabled;\n    const h = (e) => onChange?.(e.detail.checked);   // composed CustomEvent\n    el.addEventListener('change', h);\n    return () => el.removeEventListener('change', h);\n  });\n  return <aha-checkbox ref={ref}>{children}</aha-checkbox>;\n}\n\n// usage\n<AhaCheckbox checked={anon} onChange={setAnon}>\n  Let participants join anonymously\n</AhaCheckbox>\n",
    "vue": "// main.ts — register the element + mark aha-* as custom elements\nimport '@ahaslides-product/design/aha-checkbox';\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');\n\n// Component.vue\n<script setup>\nimport { ref } from 'vue';\nconst anon = ref(false);\n</script>\n\n<template>\n  <aha-checkbox\n    :checked.prop=\"anon\"\n    @change=\"anon = $event.detail.checked\"\n  >\n    Let participants join anonymously\n  </aha-checkbox>\n</template>\n"
  }
}