Two adjacent form patterns: revealing fields based on prior answers (07i) and address-input that resolves a free-text query into structured fields (07j). Both compose existing form primitives — the pattern is in the wiring, not in new components.
When to use
Conditional reveal: when the field set depends on a categorical
answer ("If 'Other', specify…", "If 'Business', show tax ID").
Address autocomplete: any place a user enters a postal address
that downstream systems need structured (billing, shipping,
KYC, support tickets).
Conditional reveal
A select or radio determines which sub-fields render. Hidden fields are not just `display: none` — they're removed from the form so they don't submit. When revealed, they animate in and the form's height grows; focus moves to the first revealed field.
Account typeWe'll show the fields you need based on this
Address autocomplete
Single input that opens a `menu-ui` of suggestions as the user types. Each suggestion shows the formatted address with the matched portion highlighted. Selecting a suggestion fills the structured fields below; clicking "Enter manually" reveals the structured fields directly.
After a suggestion is picked (or the user chose "Enter manually"), the structured fields appear, prefilled. The user can correct any line. Country drives the field set — US postal codes are different shape from CA, UK, etc.
Address details
Composition rules
Hidden fields are removed from the form, not just visually hidden — `display: none` still submits the value. Use `hidden` attr or detach from the DOM so a stale "Other — please specify" answer doesn't leak.
Animate the reveal, focus the first new field — silent appearance is jarring. A height transition + focus call makes the form feel responsive without a separate page navigation.
Country drives the address field set — US has state + ZIP; Canada has province + postal code; UK has county + postcode. A single "State / Province / Region" mega-label is worse than per-country layouts.
Always allow manual entry — autocomplete services miss new addresses, edge cases, and apartments. The "Enter manually" escape hatch is mandatory.
Highlight the matched portion in suggestions — `500 Market Street` reads faster than the unhighlighted full string. Use the user's query, not the API's match field, since they may diverge.
Suggestions cap at 5 — beyond that the picker becomes scroll-heavy. Refine the query, don't grow the menu.
Required fields stay required when revealed — conditional reveal is a UX layer, not a constraint layer. The form-level validation should treat revealed required fields as required.