{
  "name": "signup-form-card",
  "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>Create your account</h3>\n      <p slot=\"description\">Start your 14-day free trial. No credit card required.</p>\n    </header>\n    <section>\n      <col-ui gap=\"4\">\n        <field-ui label=\"Full name\">\n          <input-ui name=\"name\" autocomplete=\"name\" placeholder=\"Jane Doe\" required></input-ui>\n        </field-ui>\n        <field-ui label=\"Work email\">\n          <input-ui type=\"email\" name=\"email\" autocomplete=\"email\" placeholder=\"jane@acme.com\" required></input-ui>\n        </field-ui>\n        <field-ui label=\"Password\" hint=\"At least 8 characters with a number and a symbol.\">\n          <input-ui type=\"password\" name=\"password\" autocomplete=\"new-password\" placeholder=\"••••••••\" required></input-ui>\n        </field-ui>\n        <field-ui label=\"Confirm password\">\n          <input-ui type=\"password\" name=\"confirm\" autocomplete=\"new-password\" placeholder=\"••••••••\" required></input-ui>\n        </field-ui>\n        <check-ui name=\"terms\" label=\"I agree to the Terms of Service and Privacy Policy\" required></check-ui>\n      </col-ui>\n    </section>\n    <footer>\n      <col-ui gap=\"3\">\n        <button-ui text=\"Create account\" variant=\"primary\" type=\"submit\" stretch></button-ui>\n        <text-ui text-align=\"center\" color=\"subtle\" size=\"sm\">Already have an account? <a href=\"#\">Sign in</a></text-ui>\n      </col-ui>\n    </footer>\n  </card-ui>",
  "source": "catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
  "metadata": {
    "domain": "forms",
    "description": "Canonical full signup / create-account form card — heading and subheading, then name, email, password, and confirm-password fields each as a field-ui label wrapping an input-ui, a terms-acceptance checkbox, and a footer with a full-width Create account button plus a sign-in link. The complete form composition (header + fields + actions footer). Use for 'signup form', 'create account form', 'registration form', 'sign up'.",
    "keywords": [
      "signup",
      "form",
      "create",
      "account",
      "register",
      "registration",
      "sign",
      "up",
      "name",
      "email",
      "password",
      "confirm",
      "terms",
      "checkbox",
      "field",
      "input",
      "label",
      "complete",
      "card",
      "heading",
      "footer",
      "submit",
      "button",
      "full-form"
    ]
  },
  "captured_at": "2026-06-10T14:28:57.979Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Create your account"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "Start your 14-day free trial. No credit card required."
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "name",
      "component": "Input",
      "required": true,
      "autocomplete": "name",
      "name": "name",
      "placeholder": "Jane Doe"
    },
    {
      "id": "field",
      "component": "Field",
      "label": "Full name",
      "children": [
        "name"
      ]
    },
    {
      "id": "email",
      "component": "Input",
      "type": "email",
      "required": true,
      "autocomplete": "email",
      "name": "email",
      "placeholder": "jane@acme.com"
    },
    {
      "id": "field-2",
      "component": "Field",
      "label": "Work email",
      "children": [
        "email"
      ]
    },
    {
      "id": "password",
      "component": "Input",
      "type": "password",
      "required": true,
      "autocomplete": "new-password",
      "name": "password",
      "placeholder": "••••••••"
    },
    {
      "id": "field-3",
      "component": "Field",
      "hint": "At least 8 characters with a number and a symbol.",
      "label": "Password",
      "children": [
        "password"
      ]
    },
    {
      "id": "confirm",
      "component": "Input",
      "type": "password",
      "required": true,
      "autocomplete": "new-password",
      "name": "confirm",
      "placeholder": "••••••••"
    },
    {
      "id": "field-4",
      "component": "Field",
      "label": "Confirm password",
      "children": [
        "confirm"
      ]
    },
    {
      "id": "terms",
      "component": "CheckBox",
      "required": true,
      "label": "I agree to the Terms of Service and Privacy Policy",
      "name": "terms"
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "4",
      "children": [
        "field",
        "field-2",
        "field-3",
        "field-4",
        "terms"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "type": "submit",
      "stretch": true,
      "text": "Create account",
      "variant": "primary"
    },
    {
      "id": "text-4",
      "component": "Text",
      "textContent": "Sign in",
      "variant": "body"
    },
    {
      "id": "link",
      "component": "Link",
      "href": "#",
      "text": "Sign in",
      "children": [
        "text-4"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "text-align": "center",
      "textContent": "Already have an account?",
      "children": [
        "link"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "gap": "3",
      "children": [
        "button",
        "text-3"
      ]
    },
    {
      "id": "footer",
      "component": "Footer",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "header",
        "section",
        "footer"
      ]
    }
  ]
}