Search blocks by description or jump to a page.
Address form with country Select first, locale aware field order and labels, and an autofill correction tip.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? 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.