{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "checkbox",
  "version": "2.0.0",
  "name": "Checkbox",
  "category": "form-input",
  "appStatus": "implemented",
  "intent": "複数選択フォームコントロール。CSS 18px サイズ。",
  "docPath": "components/checkbox.md",
  "anatomy": ["box", "checkmark?", "indeterminateMark?", "label", "groupLabel?", "helperText?", "errorText?"],
  "variants": {
    "default": {
      "description": "標準チェックボックス",
      "tokenRefs": {
        "accent": "color.primary.500",
        "border": "color.semantic.light.border-strong"
      },
      "tailwind": "w-4 h-4 accent-primary-500 cursor-pointer"
    },
    "disabled": {
      "description": "操作不可状態",
      "tokenRefs": {},
      "tailwind": "w-4 h-4 opacity-50 cursor-not-allowed"
    },
    "indeterminate": {
      "description": "一部選択の不確定状態（親子関係時）",
      "tokenRefs": {
        "accent": "color.primary.500"
      },
      "tailwind": "w-4 h-4 accent-primary-500 cursor-pointer"
    }
  },
  "sizes": {},
  "states": [
    "default",
    "checked",
    "unchecked",
    "indeterminate",
    "disabled",
    "error",
    "focus"
  ],
  "a11y": {
    "role": "checkbox (native <input type=\"checkbox\">)",
    "required": [
      "label association"
    ],
    "keyboard": ["Tab", "Space"],
    "focusRing": "focus:ring-2 focus:ring-primary-500/50"
  },
  "rules": [
    {
      "id": "FORM_NO_LABEL_OMIT",
      "severity": "error"
    }
  ],
  "htmlSample": "<label class=\"flex items-center gap-2 cursor-pointer\"><input type=\"checkbox\" class=\"w-4 h-4 accent-primary-500\"><span class=\"text-base text-body\">同意します</span></label>"
}