{
  "name": "stepper-form-wizard",
  "kind": "block",
  "primary": "col-ui",
  "page": "/catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "gap": "5"
  },
  "html": "<col-ui gap=\"5\">\n      <step-progress-ui value=\"2\" total=\"4\" caption=\"Step 2 of 4\"></step-progress-ui>\n      <header>\n        <h2>Workspace details</h2>\n        <p>Tell us about your team. You can change this later.</p>\n      </header>\n      <col-ui gap=\"4\">\n        <field-ui label=\"Workspace name\">\n          <input-ui placeholder=\"Acme Inc.\"></input-ui>\n        </field-ui>\n        <field-ui label=\"Team size\">\n          <select-ui>\n            <option>1–5 people</option>\n            <option>6–25 people</option>\n            <option>26–100 people</option>\n            <option>100+ people</option>\n          </select-ui>\n        </field-ui>\n        <field-ui label=\"Use case\">\n          <textarea-ui placeholder=\"What are you building?\" rows=\"3\"></textarea-ui>\n        </field-ui>\n      </col-ui>\n      <row-ui gap=\"3\" align=\"center\">\n        <button-ui text=\"Back\" variant=\"outline\"></button-ui>\n        <button-ui text=\"Continue\" variant=\"primary\"></button-ui>\n      </row-ui>\n  </col-ui>",
  "source": "catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
  "metadata": {
    "domain": "forms",
    "description": "Multi-step form with profile, billing, and review steps and progress indicator. Stepper wizard with sequential field groups and back/next navigation.",
    "keywords": [
      "multi-step",
      "form",
      "progress",
      "indicator",
      "steps",
      "stepper",
      "wizard",
      "profile",
      "billing",
      "review",
      "sequential",
      "onboarding",
      "setup",
      "workflow",
      "back",
      "next"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "column",
      "component": "Column"
    },
    {
      "id": "text",
      "component": "Text",
      "variant": "title",
      "textContent": "Workspace details"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "textContent": "Tell us about your team. You can change this later."
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "input",
      "component": "Input",
      "placeholder": "Acme Inc."
    },
    {
      "id": "field",
      "component": "Field",
      "label": "Workspace name",
      "children": [
        "input"
      ]
    },
    {
      "id": "choice-picker",
      "component": "ChoicePicker",
      "options": [
        {
          "value": "1–5 people",
          "label": "1–5 people"
        },
        {
          "value": "6–25 people",
          "label": "6–25 people"
        },
        {
          "value": "26–100 people",
          "label": "26–100 people"
        },
        {
          "value": "100+ people",
          "label": "100+ people"
        }
      ]
    },
    {
      "id": "field-2",
      "component": "Field",
      "label": "Team size",
      "children": [
        "choice-picker"
      ]
    },
    {
      "id": "text-area",
      "component": "TextArea",
      "placeholder": "What are you building?",
      "rows": "3"
    },
    {
      "id": "field-3",
      "component": "Field",
      "label": "Use case",
      "children": [
        "text-area"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "gap": "4",
      "children": [
        "field",
        "field-2",
        "field-3"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "text": "Back",
      "variant": "outline"
    },
    {
      "id": "button-2",
      "component": "Button",
      "text": "Continue",
      "variant": "primary"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "3",
      "children": [
        "button",
        "button-2"
      ]
    },
    {
      "id": "root",
      "component": "Column",
      "gap": "5",
      "children": [
        "column",
        "header",
        "column-2",
        "row"
      ]
    }
  ]
}