{
  "name": "col-form-stack",
  "kind": "block",
  "primary": "div",
  "page": "/packages/web-components/components/col/col.examples.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-artifact-item": "",
    "data-artifact-label": "form field stack"
  },
  "html": "<col-ui gap=\"3\">\n        <field-ui label=\"Full name\">\n          <input-ui placeholder=\"Maya Chen\"></input-ui>\n        </field-ui>\n        <field-ui label=\"Email\">\n          <input-ui type=\"email\" placeholder=\"maya@example.com\"></input-ui>\n        </field-ui>\n        <field-ui label=\"Role\">\n          <select-ui value=\"member\">\n            <option value=\"admin\">Admin</option>\n            <option value=\"member\">Member</option>\n          </select-ui>\n        </field-ui>\n      </col-ui>",
  "source": "packages/web-components/components/col/col.examples.html",
  "metadata": {
    "domain": "forms",
    "description": "Vertical form field stack — col-ui wrapping labeled inputs with consistent gap. The canonical form layout.",
    "keywords": [
      "col",
      "column",
      "form",
      "fields",
      "stack",
      "vertical",
      "gap",
      "input",
      "layout",
      "stacked"
    ]
  },
  "captured_at": "2026-06-10T20:25:14.783Z",
  "template": [
    {
      "id": "input",
      "component": "Input",
      "placeholder": "Maya Chen"
    },
    {
      "id": "field",
      "component": "Field",
      "label": "Full name",
      "children": [
        "input"
      ]
    },
    {
      "id": "input-2",
      "component": "Input",
      "type": "email",
      "placeholder": "maya@example.com"
    },
    {
      "id": "field-2",
      "component": "Field",
      "label": "Email",
      "children": [
        "input-2"
      ]
    },
    {
      "id": "choice-picker",
      "component": "ChoicePicker",
      "value": "member",
      "options": [
        {
          "value": "admin",
          "label": "Admin"
        },
        {
          "value": "member",
          "label": "Member"
        }
      ]
    },
    {
      "id": "field-3",
      "component": "Field",
      "label": "Role",
      "children": [
        "choice-picker"
      ]
    },
    {
      "id": "root",
      "component": "Column",
      "gap": "3",
      "children": [
        "field",
        "field-2",
        "field-3"
      ]
    }
  ]
}