shadcn.io is not affiliated with official shadcn/ui
Address Form with ZIP Help Block for React
A six-column address grid that never changes size: street, an apartment line behind a quiet button, city, a state select and a ZIP code that fills the city and state from a typed table of six.
Installation
Overview
Collect a forwarding or shipping address with this address form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner, and one band holds a six-column grid that never changes size. Street is a full row. The apartment line is behind a quiet "Add apartment, suite or unit" button of the height of the field it becomes, so opening it moves nothing. City, State (a Select of the fifty states and DC, showing the two letters when closed) and ZIP share a row from sm and stack on phones. A five-digit ZIP that is in a typed table of six fills City and State and marks them "Filled from ZIP"; they stay editable, and a value you typed is never overwritten by a later ZIP. Save checks the fields in order, names every problem under its field and puts focus on the first. It's built from Input, Select, Shine Button and Guides, with a CSS entrance only. For mail, shipping and billing addresses in the United States.
FAQ
How does the ZIP help work, and how do I use a real lookup?
ZIPS is a typed table of six sample codes (94103, 10001, 60601, 73301, 98101, 02108) and it stands in for a postal service: the block says so under the grid. When the ZIP has five digits and is in the table, City and State take its place and carry "Filled from ZIP". In your app look the ZIP up on the server (or with your carrier's API) in typeZip and fill the same two fields; the rule that a typed value is never overwritten stays.
Why does nothing shift when I open the apartment line?
Every field sits in a fixed cell with its own problem line reserved, and the apartment cell holds both states in one grid cell: the button, as tall as the field it becomes, and the field itself. Opening hides one and shows the other in the same box; Remove puts the button back and focus with it. The marks "Filled from ZIP" sit in each label row, reserved whether shown or not.
When are the fields checked?
Not while you type for the first time. Pressing Save checks Street (three characters or more), City, State and ZIP (five digits) in that order, shows each problem under its field and moves focus to the first. From then on the fields are checked as you type, so a fixed field clears at once. The foot says "Not saved. Fix the marked fields." and the fields carry aria-invalid.
Does browser autofill work?
Yes: the fields carry the standard tokens (address-line1, address-line2, address-level2, postal-code) so a browser can fill the whole cluster. If autofill puts a ZIP that is in the table into the field, City and State follow it like a typed one.
What stays local, and how do I connect it for real?
Nothing is saved or sent: Save address says "Address saved here. Nothing was sent." Replace the body of submit with a call that stores the address, and validate it again on the server. For other countries use the country select to choose a schema, since postal codes and states differ.
Related
- Pro
Ship-To Country Select Form
SelectsA combobox of 20 countries in four areas, each with a two-letter tile and calling code, where four are out of reach with the reason in the row and a band gives what a parcel to the chosen country needs.
- Pro
Phone Input with Country Code Form
Numbers and pickersA national-number field joined to a country menu that formats the digits for the chosen country as you type, checks the count per country and shows how the number would be stored.
- Pro
Credit Card Field Form
Checkout and addressA card as one joined control: number, expiry and CVC in a single group with one focus ring, a brand from the first digits, auto-advance, errors that name the part, and only the brand and last four kept after Save.
- Pro
Payment Method Form
Checkout and addressA payment form where the method decides the fields: card, bank transfer with an IBAN grouped as you type and checked for length and mod-97, or a wallet, in one grid cell so nothing moves.
- Pro
Grouped Person Select Form
SelectsA select of nine people grouped by team, each with initials, name and duty, beside a week strip that shows that person's hours and marks a week that would pass 40 hours.
- Pro
Review and Submit Form
Dialogs and layoutsA review step: three sections of typed answers that each edit in place in the same boxes, a side cell of what changed, a Submit that names the section to finish, and a lock after a local submit.