shadcn.io is not affiliated with official shadcn/ui
Address Form Checkout Block for Svelte
A delivery address form with a postcode rule per country, a Check address button that shows what it would tidy beside what you typed, and a choice between the two before you use it.
Installation
Overview
Collect a delivery address that survives the courier, with this address form for Svelte with Ark UI. A compact header from Aldwick Joinery, a furniture maker, sits over a hairline panel in two cells. The first holds the form: name, street, a second line, city, region, postcode, country and an optional phone number, each in a Field with a label, a hint and a reserved problem line. The rules are real. A street needs its number, a US state or Canadian province is two letters, a phone number has 7 to 15 digits, and the postcode must match the country you pick: a ZIP in the United States, a postal code in Canada, a postcode in the United Kingdom, a Postleitzahl in Germany. Changing the Native Select changes the rule and the labels. Check address runs a normaliser in the tab and fills the second cell with two Radio Group cards, You typed and Suggested, the lines that differ in medium weight. Use this address is the one Shine Button and stays off until a check has run. It's built from Field, Input, Native Select, Radio Group, Button, Shine Button and Guides, with a CSS entrance only. For furniture, appliances, gifts and any checkout where a wrong line costs a second delivery.
FAQ
Which rules does each country use?
The United States takes five digits or ZIP+4 and a two-letter state. Canada takes letter, digit, letter, then digit, letter, digit, with an optional space, and a two-letter province. The United Kingdom takes an outward and an inward code such as N1 9GU, and the county is optional. Germany takes five digits and the state is optional. The patterns are typed at the top of the file, so adding a country is one object with its pattern, its labels and its hints.
What does Check address change?
It writes street words out in full (St becomes Street, Apt becomes Apartment), capitalises words, lays a postcode out the country's way (a CA code gets its space, a nine-digit ZIP its hyphen, a UK postcode is split before the last three characters), upper-cases a state code and formats a ten-digit US phone number. For five US ZIP codes in a small table it also sets the city and state, which is how a wrong city gets noticed. The lines that differ are in medium weight in both cards, and the heading says how many changes there are.
What happens if a field is wrong?
A field shows its problem after you leave it, or for every field once you press Check address. The problem has its own reserved line with an icon and words, so nothing moves. The press names how many fields need fixing in the polite status line and moves focus to the first one, in reading order. Typing after a check clears the result, because the suggestion belongs to the text that was checked.
What does Use this address do?
It writes the card you chose back into the form, so the fields now hold exactly that address, and says so in the status line and under the cards. Pressing it before a check refuses, says why and moves focus to Check address. The button uses an aria-disabled state rather than disabled, so a press still answers.
How does it behave on a phone?
The cells stack: the form first, then the result under it, with the Use this address button pinned to the bottom of the screen. Every field is full width and the result cards keep their height whether or not a check has run, so the page does not jump when the suggestion appears.
What stays local, and how do I connect it for real?
Everything. The ZIP table, the street words and the postcode shapes are typed in the file, and nothing is sent or stored. To connect it, replace suggestedOf with a call to your address-verification service, keep the radio cards for the answer, and keep the country rules as the first line of defence so most mistakes never leave the browser.