{
  "name": "business-address-form",
  "kind": "block",
  "primary": "form",
  "page": "/apps/user-flow/app/registration/address/address.contents.html",
  "slots": [],
  "nested": [
    "reg-step-header",
    "reg-address-form",
    "reg-step-footer",
    "reg-step-progress"
  ],
  "attrs": {
    "data-reg-input": "",
    "action": "/site/examples/registration/brand-scrape",
    "method": "get"
  },
  "html": "<form data-reg-input action=\"/site/examples/registration/brand-scrape\" method=\"get\">\n        <header data-reg-heading><!-- nested: reg-step-header --></header>\n\n        <section data-reg-form><!-- nested: reg-address-form --></section>\n\n        <footer><!-- nested: reg-step-footer --></footer>\n      </form>",
  "source": "apps/user-flow/app/registration/address/address.contents.html",
  "metadata": {
    "domain": "forms",
    "description": "Complete business-address form — heading, a country select that drives the field set, then street / suite / city / state / postal fields laid out with city and state/zip sharing a row. The whole form composition with header and submit footer. Use for 'address form', 'billing address form', 'shipping address form', 'form with two-column fields'.",
    "keywords": [
      "address",
      "form",
      "business",
      "billing",
      "shipping",
      "mailing",
      "street",
      "city",
      "state",
      "region",
      "postal",
      "zip",
      "country",
      "select",
      "two-column",
      "row",
      "complete",
      "card",
      "heading",
      "footer",
      "submit",
      "full-form"
    ],
    "related": [
      "reg-address-form",
      "form-fields-two-column",
      "reg-step-footer"
    ],
    "tags": {
      "complexity": "moderate",
      "form": "address"
    }
  },
  "captured_at": "2026-06-10T14:28:57.979Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "display",
      "textContent": "Business address"
    },
    {
      "id": "text-2",
      "component": "Text",
      "color": "subtle",
      "textContent": "Where do we send invoices, contracts, and physical mail? Pick the country first — fields adapt to the local convention."
    },
    {
      "id": "header-2",
      "component": "Header",
      "data-reg-heading": "",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "data-reg-heading": "",
      "children": [
        "header-2"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "strong": true,
      "textContent": "Headquarters"
    },
    {
      "id": "hq-country",
      "component": "ChoicePicker",
      "name": "hq_country",
      "value": "us",
      "options": [
        {
          "value": "us",
          "label": "United States"
        },
        {
          "value": "gb",
          "label": "United Kingdom"
        },
        {
          "value": "de",
          "label": "Germany"
        },
        {
          "value": "jp",
          "label": "Japan"
        },
        {
          "value": "ca",
          "label": "Canada"
        },
        {
          "value": "other",
          "label": "Other…"
        }
      ],
      "data-address-country": ""
    },
    {
      "id": "field",
      "component": "Field",
      "inline": true,
      "label": "Country",
      "children": [
        "hq-country"
      ]
    },
    {
      "id": "hq-street-us",
      "component": "Input",
      "required": true,
      "autocomplete": "street-address",
      "name": "hq_street_us",
      "placeholder": "100 Main Street"
    },
    {
      "id": "field-2",
      "component": "Field",
      "inline": true,
      "label": "Street",
      "children": [
        "hq-street-us"
      ]
    },
    {
      "id": "hq-suite-us",
      "component": "Input",
      "autocomplete": "address-line2",
      "name": "hq_suite_us",
      "placeholder": "Suite 500"
    },
    {
      "id": "field-3",
      "component": "Field",
      "inline": true,
      "label": "Suite / Floor",
      "children": [
        "hq-suite-us"
      ]
    },
    {
      "id": "hq-city-us",
      "component": "Input",
      "required": true,
      "autocomplete": "address-level2",
      "name": "hq_city_us",
      "placeholder": "San Francisco"
    },
    {
      "id": "field-4",
      "component": "Field",
      "inline": true,
      "label": "City",
      "children": [
        "hq-city-us"
      ]
    },
    {
      "id": "hq-state-us",
      "component": "ChoicePicker",
      "name": "hq_state_us",
      "value": "ca",
      "options": [
        {
          "value": "ca",
          "label": "CA"
        },
        {
          "value": "ny",
          "label": "NY"
        },
        {
          "value": "tx",
          "label": "TX"
        },
        {
          "value": "wa",
          "label": "WA"
        },
        {
          "value": "ma",
          "label": "MA"
        },
        {
          "value": "il",
          "label": "IL"
        },
        {
          "value": "other",
          "label": "…"
        }
      ]
    },
    {
      "id": "field-5",
      "component": "Field",
      "label": "State",
      "children": [
        "hq-state-us"
      ]
    },
    {
      "id": "hq-zip-us",
      "component": "Input",
      "required": true,
      "autocomplete": "postal-code",
      "name": "hq_zip_us",
      "pattern": "\\d{5}(-\\d{4})?",
      "placeholder": "94110"
    },
    {
      "id": "field-6",
      "component": "Field",
      "label": "ZIP",
      "children": [
        "hq-zip-us"
      ]
    },
    {
      "id": "row",
      "component": "Row",
      "align": "end",
      "gap": "2",
      "children": [
        "field-4",
        "field-5",
        "field-6"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "data-address-fields": "us",
      "children": [
        "field-2",
        "field-3",
        "row"
      ]
    },
    {
      "id": "hq-street-gb",
      "component": "Input",
      "required": true,
      "autocomplete": "street-address",
      "name": "hq_street_gb",
      "placeholder": "10 Downing Street"
    },
    {
      "id": "field-7",
      "component": "Field",
      "inline": true,
      "label": "Address line 1",
      "children": [
        "hq-street-gb"
      ]
    },
    {
      "id": "hq-street2-gb",
      "component": "Input",
      "autocomplete": "address-line2",
      "name": "hq_street2_gb",
      "placeholder": "Westminster"
    },
    {
      "id": "field-8",
      "component": "Field",
      "inline": true,
      "label": "Address line 2",
      "children": [
        "hq-street2-gb"
      ]
    },
    {
      "id": "hq-city-gb",
      "component": "Input",
      "required": true,
      "autocomplete": "address-level2",
      "name": "hq_city_gb",
      "placeholder": "London"
    },
    {
      "id": "field-9",
      "component": "Field",
      "inline": true,
      "label": "Town / City",
      "children": [
        "hq-city-gb"
      ]
    },
    {
      "id": "hq-county-gb",
      "component": "Input",
      "autocomplete": "address-level1",
      "name": "hq_county_gb",
      "placeholder": "Greater London"
    },
    {
      "id": "field-10",
      "component": "Field",
      "inline": true,
      "label": "County (optional)",
      "children": [
        "hq-county-gb"
      ]
    },
    {
      "id": "hq-postcode-gb",
      "component": "Input",
      "required": true,
      "autocomplete": "postal-code",
      "name": "hq_postcode_gb",
      "placeholder": "SW1A 2AA"
    },
    {
      "id": "field-11",
      "component": "Field",
      "inline": true,
      "label": "Postcode",
      "children": [
        "hq-postcode-gb"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "data-address-fields": "gb",
      "children": [
        "field-7",
        "field-8",
        "field-9",
        "field-10",
        "field-11"
      ]
    },
    {
      "id": "hq-street-de",
      "component": "Input",
      "required": true,
      "autocomplete": "street-address",
      "name": "hq_street_de",
      "placeholder": "Unter den Linden 77"
    },
    {
      "id": "field-12",
      "component": "Field",
      "inline": true,
      "label": "Straße und Hausnummer",
      "children": [
        "hq-street-de"
      ]
    },
    {
      "id": "hq-extra-de",
      "component": "Input",
      "autocomplete": "address-line2",
      "name": "hq_extra_de",
      "placeholder": "c/o Empfänger"
    },
    {
      "id": "field-13",
      "component": "Field",
      "inline": true,
      "label": "Adresszusatz (optional)",
      "children": [
        "hq-extra-de"
      ]
    },
    {
      "id": "hq-plz-de",
      "component": "Input",
      "required": true,
      "autocomplete": "postal-code",
      "name": "hq_plz_de",
      "pattern": "\\d{5}",
      "placeholder": "10117"
    },
    {
      "id": "field-14",
      "component": "Field",
      "label": "PLZ",
      "children": [
        "hq-plz-de"
      ]
    },
    {
      "id": "hq-city-de",
      "component": "Input",
      "required": true,
      "autocomplete": "address-level2",
      "name": "hq_city_de",
      "placeholder": "Berlin"
    },
    {
      "id": "field-15",
      "component": "Field",
      "inline": true,
      "label": "Ort",
      "children": [
        "hq-city-de"
      ]
    },
    {
      "id": "row-2",
      "component": "Row",
      "align": "end",
      "gap": "2",
      "children": [
        "field-14",
        "field-15"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "data-address-fields": "de",
      "children": [
        "field-12",
        "field-13",
        "row-2"
      ]
    },
    {
      "id": "hq-postcode-jp",
      "component": "Input",
      "required": true,
      "autocomplete": "postal-code",
      "name": "hq_postcode_jp",
      "pattern": "\\d{3}-\\d{4}",
      "placeholder": "100-0014"
    },
    {
      "id": "field-16",
      "component": "Field",
      "inline": true,
      "label": "郵便番号 · Postal code",
      "children": [
        "hq-postcode-jp"
      ]
    },
    {
      "id": "hq-prefecture-jp",
      "component": "ChoicePicker",
      "name": "hq_prefecture_jp",
      "value": "13",
      "options": [
        {
          "value": "13",
          "label": "東京都 · Tokyo"
        },
        {
          "value": "27",
          "label": "大阪府 · Osaka"
        },
        {
          "value": "14",
          "label": "神奈川県 · Kanagawa"
        },
        {
          "value": "01",
          "label": "北海道 · Hokkaido"
        },
        {
          "value": "26",
          "label": "京都府 · Kyoto"
        },
        {
          "value": "23",
          "label": "愛知県 · Aichi"
        },
        {
          "value": "40",
          "label": "福岡県 · Fukuoka"
        },
        {
          "value": "other",
          "label": "その他…"
        }
      ]
    },
    {
      "id": "field-17",
      "component": "Field",
      "inline": true,
      "label": "都道府県 · Prefecture",
      "children": [
        "hq-prefecture-jp"
      ]
    },
    {
      "id": "hq-city-jp",
      "component": "Input",
      "required": true,
      "autocomplete": "address-level2",
      "name": "hq_city_jp",
      "placeholder": "千代田区"
    },
    {
      "id": "field-18",
      "component": "Field",
      "inline": true,
      "label": "市区町村 · City / Ward",
      "children": [
        "hq-city-jp"
      ]
    },
    {
      "id": "hq-block-jp",
      "component": "Input",
      "required": true,
      "autocomplete": "street-address",
      "name": "hq_block_jp",
      "placeholder": "霞が関 1-2-3"
    },
    {
      "id": "field-19",
      "component": "Field",
      "inline": true,
      "label": "番地 · Block / Lot",
      "children": [
        "hq-block-jp"
      ]
    },
    {
      "id": "hq-building-jp",
      "component": "Input",
      "autocomplete": "address-line2",
      "name": "hq_building_jp"
    },
    {
      "id": "field-20",
      "component": "Field",
      "inline": true,
      "label": "建物名 · Building (optional)",
      "children": [
        "hq-building-jp"
      ]
    },
    {
      "id": "column-4",
      "component": "Column",
      "data-address-fields": "jp",
      "children": [
        "field-16",
        "field-17",
        "field-18",
        "field-19",
        "field-20"
      ]
    },
    {
      "id": "hq-street-ca",
      "component": "Input",
      "required": true,
      "autocomplete": "street-address",
      "name": "hq_street_ca",
      "placeholder": "111 Wellington Street"
    },
    {
      "id": "field-21",
      "component": "Field",
      "inline": true,
      "label": "Street address",
      "children": [
        "hq-street-ca"
      ]
    },
    {
      "id": "hq-suite-ca",
      "component": "Input",
      "autocomplete": "address-line2",
      "name": "hq_suite_ca"
    },
    {
      "id": "field-22",
      "component": "Field",
      "inline": true,
      "label": "Suite / Apt",
      "children": [
        "hq-suite-ca"
      ]
    },
    {
      "id": "hq-city-ca",
      "component": "Input",
      "required": true,
      "autocomplete": "address-level2",
      "name": "hq_city_ca",
      "placeholder": "Ottawa"
    },
    {
      "id": "field-23",
      "component": "Field",
      "inline": true,
      "label": "City",
      "children": [
        "hq-city-ca"
      ]
    },
    {
      "id": "hq-province-ca",
      "component": "ChoicePicker",
      "name": "hq_province_ca",
      "value": "on",
      "options": [
        {
          "value": "on",
          "label": "ON"
        },
        {
          "value": "qc",
          "label": "QC"
        },
        {
          "value": "bc",
          "label": "BC"
        },
        {
          "value": "ab",
          "label": "AB"
        },
        {
          "value": "mb",
          "label": "MB"
        },
        {
          "value": "sk",
          "label": "SK"
        },
        {
          "value": "ns",
          "label": "NS"
        },
        {
          "value": "nb",
          "label": "NB"
        },
        {
          "value": "nl",
          "label": "NL"
        },
        {
          "value": "pe",
          "label": "PE"
        },
        {
          "value": "yt",
          "label": "YT"
        },
        {
          "value": "nt",
          "label": "NT"
        },
        {
          "value": "nu",
          "label": "NU"
        }
      ]
    },
    {
      "id": "field-24",
      "component": "Field",
      "label": "Province",
      "children": [
        "hq-province-ca"
      ]
    },
    {
      "id": "hq-postcode-ca",
      "component": "Input",
      "required": true,
      "autocomplete": "postal-code",
      "name": "hq_postcode_ca",
      "pattern": "[A-Za-z]\\d[A-Za-z] ?\\d[A-Za-z]\\d",
      "placeholder": "K1A 0A9"
    },
    {
      "id": "field-25",
      "component": "Field",
      "label": "Postal code",
      "children": [
        "hq-postcode-ca"
      ]
    },
    {
      "id": "row-3",
      "component": "Row",
      "align": "end",
      "gap": "2",
      "children": [
        "field-23",
        "field-24",
        "field-25"
      ]
    },
    {
      "id": "column-5",
      "component": "Column",
      "data-address-fields": "ca",
      "children": [
        "field-21",
        "field-22",
        "row-3"
      ]
    },
    {
      "id": "hq-address-other",
      "component": "TextArea",
      "required": true,
      "name": "hq_address_other",
      "placeholder": "Street, number, building, postal code, city — whatever the local convention requires.",
      "rows": "4"
    },
    {
      "id": "field-26",
      "component": "Field",
      "inline": true,
      "label": "Full address",
      "children": [
        "hq-address-other"
      ]
    },
    {
      "id": "hq-country-other",
      "component": "Input",
      "required": true,
      "autocomplete": "country-name",
      "name": "hq_country_other",
      "placeholder": "Singapore"
    },
    {
      "id": "field-27",
      "component": "Field",
      "inline": true,
      "label": "Country name",
      "children": [
        "hq-country-other"
      ]
    },
    {
      "id": "column-6",
      "component": "Column",
      "data-address-fields": "other",
      "children": [
        "field-26",
        "field-27"
      ]
    },
    {
      "id": "hq-phone",
      "component": "Input",
      "type": "tel",
      "autocomplete": "tel",
      "name": "hq_phone",
      "placeholder": "+1 (555) 123-4567",
      "data-address-phone": ""
    },
    {
      "id": "field-28",
      "component": "Field",
      "inline": true,
      "label": "Phone",
      "children": [
        "hq-phone"
      ]
    },
    {
      "id": "divider",
      "component": "Divider"
    },
    {
      "id": "text-4",
      "component": "Text",
      "strong": true,
      "textContent": "Billing address"
    },
    {
      "id": "billing-same",
      "component": "CheckBox",
      "checked": true,
      "label": "Same as headquarters",
      "name": "billing_same"
    },
    {
      "id": "row-4",
      "component": "Row",
      "align": "center",
      "justify": "space-between",
      "children": [
        "text-4",
        "billing-same"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "variant": "body",
      "slot": "content",
      "textContent": "We'll use the headquarters address for invoicing. Uncheck \"Same as headquarters\" if your accounting team is at a different site or in a different country."
    },
    {
      "id": "alert",
      "component": "Alert",
      "icon": "info",
      "variant": "info",
      "children": [
        "text-5"
      ]
    },
    {
      "id": "defer",
      "component": "CheckBox",
      "label": "I'll do this later from admin → workspace → addresses",
      "name": "defer"
    },
    {
      "id": "text-6",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Required for invoicing — your first invoice will use a placeholder address until completed.",
      "data-reg-defer-hint": ""
    },
    {
      "id": "column-7",
      "component": "Column",
      "data-reg-defer-row": "",
      "children": [
        "defer",
        "text-6"
      ]
    },
    {
      "id": "section-2",
      "component": "Section",
      "data-reg-form": "",
      "children": [
        "text-3",
        "field",
        "column",
        "column-2",
        "column-3",
        "column-4",
        "column-5",
        "column-6",
        "field-28",
        "divider",
        "row-4",
        "alert",
        "column-7"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "data-reg-form": "",
      "children": [
        "section-2"
      ]
    },
    {
      "id": "column-8",
      "component": "Column"
    },
    {
      "id": "text-7",
      "component": "Text",
      "textContent": "Back",
      "variant": "body"
    },
    {
      "id": "link",
      "component": "Link",
      "href": "/site/examples/registration/legal",
      "text": "Back",
      "data-reg-back": "",
      "children": [
        "text-7"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "type": "submit",
      "text": "Continue",
      "variant": "primary"
    },
    {
      "id": "column-9",
      "component": "Column",
      "data-reg-actions": "",
      "children": [
        "link",
        "button"
      ]
    },
    {
      "id": "footer-2",
      "component": "Footer",
      "children": [
        "column-8",
        "column-9"
      ]
    },
    {
      "id": "footer",
      "component": "Footer",
      "children": [
        "footer-2"
      ]
    },
    {
      "id": "root",
      "component": "FormContainer",
      "data-reg-input": "",
      "children": [
        "header",
        "section",
        "footer"
      ]
    }
  ]
}