Address Form | Zyeon UI

Preview in your theme

Uncontrolled, starting in the US. Change the country and the form re-lays itself out: the rows, their labels, their order and the postal rule all come from a table of 11 countries. Values that cannot travel are cleared and the form says which ones — try picking a state, typing a ZIP, then switching to the United Kingdom.

onCountryChange log — switch the country to fill this

onSubmit accepted 0 times — it only fires once every visible field validates.

Four countries side by side, pre-filled through defaultValue. Same component, four different field sets and four different orders — nothing here is configured per instance beyond the country. Each Submit button really submits and prints its payload below.

US · street → city → State + ZIP · State is a dropdown, ZIP accepts 5 or 5+4

UK · street → town → Postcode · no state field at all; the postcode carries the routing

Japan · 郵便番号 first, then Prefecture, then city, then the street line — large to small

Hong Kong · no postal code exists, so the row is gone — not blank-and-required

last accepted payload — none yet

Validation runs on blur and on submit, never on a keystroke. Submitting this empty US form reports five fields — Full name, Street address, City, State, ZIP code — through their own role=alert nodes, and moves focus to the first of them (Full name), so Tab walks you down the list. Typing into a field clears that field's error immediately; an untouched field you merely tab through stays quiet until the first submit.

onSubmit fired 0 times — fill all five in and the same button goes through.

Controlled value, with the country driven from outside the form. The Ship-to buttons call the exported changeAddressCountry(), so an external switch drops exactly the same values as the built-in picker — but it hands the list back to the caller instead of drawing the form's own notice, and the line under the buttons is this demo rendering it. The payload omits keys the country has no field for: switch to HK, pick an Area, submit, and postalCode is simply not in it. “Switch to HK in 3s” shows one more thing — click it, then click into the ZIP field and wait: when the row is removed under the cursor, focus moves to the country select instead of falling onto the page body.

Ship to:

live value — {"country":"US","name":"Alex Morgan","line1":"1355 Market St","city":"San Francisco","region":"CA","postalCode":"94103","phone":"+1 415 555 0132"}

last onSubmit payload — nothing submitted yet

390px container (iPhone logical width): the two-column split is a container query at 30rem, so everything stacks and nothing overflows sideways — including this Japanese layout, whose CJK street line scrolls inside its own input rather than widening the form. It also asks for a phone (showPhone), which is empty here, so the first submit reports it. The second card is a US address in the same 390px column with disabled — every control and the button are inert.

accepted 0 times

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro