{
  "name": "form-checkbox-group",
  "kind": "block",
  "primary": "col-ui",
  "page": "/site/patterns/forms.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "gap": "2"
  },
  "html": "<col-ui gap=\"2\">\n        <check-ui label=\"Send weekly digest\"></check-ui>\n        <check-ui label=\"Send product updates\" checked></check-ui>\n        <check-ui label=\"Send security alerts\" checked></check-ui>\n      </col-ui>",
  "source": "site/pages/patterns/forms.html",
  "metadata": {
    "domain": "forms",
    "description": "A vertical group of self-labeling checkboxes — check-ui rows stacked in a col-ui, each carrying its own label attribute (no field-ui wrapper). For multi-select preferences like notification opt-ins.",
    "keywords": [
      "form",
      "checkbox",
      "group",
      "self-labeling",
      "check-ui",
      "col-ui",
      "multi-select",
      "preferences",
      "opt-in",
      "notifications",
      "digest",
      "stacked",
      "vertical",
      "forms",
      "label",
      "checked"
    ]
  },
  "captured_at": "2026-06-09T18:16:34.245Z",
  "template": [
    {
      "id": "check-box",
      "component": "CheckBox",
      "label": "Send weekly digest"
    },
    {
      "id": "check-box-2",
      "component": "CheckBox",
      "checked": true,
      "label": "Send product updates"
    },
    {
      "id": "check-box-3",
      "component": "CheckBox",
      "checked": true,
      "label": "Send security alerts"
    },
    {
      "id": "root",
      "component": "Column",
      "gap": "2",
      "children": [
        "check-box",
        "check-box-2",
        "check-box-3"
      ]
    }
  ]
}