{
  "name": "form-field-with-error",
  "kind": "block",
  "primary": "card-ui",
  "page": "/catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<card-ui>\n    <header>\n      <h3>Validation states</h3>\n      <p slot=\"description\">Error messages live on the control via the error attribute.</p>\n    </header>\n    <section>\n      <col-ui gap=\"4\">\n        <field-ui label=\"Email\" required>\n          <input-ui type=\"email\" name=\"email\" value=\"jane@\" error=\"Enter a valid email address.\" required></input-ui>\n        </field-ui>\n        <field-ui label=\"Username\" hint=\"Letters, numbers, and underscores only.\">\n          <input-ui name=\"username\" value=\"jane_doe\" autocomplete=\"username\"></input-ui>\n        </field-ui>\n        <field-ui label=\"Password\" required>\n          <input-ui type=\"password\" name=\"password\" value=\"abc\" error=\"Password must be at least 8 characters.\" required></input-ui>\n        </field-ui>\n      </col-ui>\n    </section>\n    <footer>\n      <button-ui text=\"Save changes\" variant=\"primary\" type=\"submit\" stretch></button-ui>\n    </footer>\n  </card-ui>",
  "source": "catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
  "metadata": {
    "domain": "forms",
    "description": "Form fields showing the canonical validation-error shape — a field-ui whose slotted input-ui carries an `error` message (the error renders below the control in danger style, NOT as a sibling element), shown next to a valid field with a hint for contrast. Use for 'form with validation errors', 'invalid field state', 'form field error message'.",
    "keywords": [
      "form",
      "field",
      "validation",
      "error",
      "invalid",
      "danger",
      "message",
      "hint",
      "required",
      "input",
      "field-ui",
      "error-state",
      "inline-error",
      "feedback",
      "aria",
      "validation-message",
      "canonical"
    ]
  },
  "captured_at": "2026-06-10T14:28:57.979Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Validation states"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "Error messages live on the control via the error attribute."
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "email",
      "component": "Input",
      "type": "email",
      "required": true,
      "error": "Enter a valid email address.",
      "name": "email",
      "value": "jane@"
    },
    {
      "id": "field",
      "component": "Field",
      "required": true,
      "label": "Email",
      "children": [
        "email"
      ]
    },
    {
      "id": "username",
      "component": "Input",
      "autocomplete": "username",
      "name": "username",
      "value": "jane_doe"
    },
    {
      "id": "field-2",
      "component": "Field",
      "hint": "Letters, numbers, and underscores only.",
      "label": "Username",
      "children": [
        "username"
      ]
    },
    {
      "id": "password",
      "component": "Input",
      "type": "password",
      "required": true,
      "error": "Password must be at least 8 characters.",
      "name": "password",
      "value": "abc"
    },
    {
      "id": "field-3",
      "component": "Field",
      "required": true,
      "label": "Password",
      "children": [
        "password"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "4",
      "children": [
        "field",
        "field-2",
        "field-3"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "type": "submit",
      "stretch": true,
      "text": "Save changes",
      "variant": "primary"
    },
    {
      "id": "footer",
      "component": "Footer",
      "children": [
        "button"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "header",
        "section",
        "footer"
      ]
    }
  ]
}