Address Form Card
Address form with country Select first, locale aware field order and labels, and an autofill correction tip.
Address form with country Select first, locale aware field order and labels, and an autofill correction tip.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Address Form Card leads with the country select (defaulted to Germany) and states why upfront: field order and labels change to match local postal conventions. The helper text under the select names the German rule specifically: postal code before city, state not collected. The address fields follow in German order: street and house number (Unter den Linden 42), optional address supplement (c/o, Etage, Postfach), then Postleitzahl (10117) and Ort (Berlin) in a narrow-wide grid. An autofill tip callout explains that if the browser transposes city and postal code, correcting postal code first triggers a re-lookup of the city.
No data arrays; the form is static markup. Country-first is the pattern decision: it gates the field set rather than appending country as an afterthought.
Reach for this block on billing or shipping address forms, wired to a country-to-field-schema lookup that reorders and relabels fields on country change. The static block shows the German layout; swap labels and grid ratios per locale.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the billing address panel for EU customers. Other address form layouts:
Tip: the autofill tip earns its space; browser autofill transposes postal and city more often than users expect.