## 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 type We'll show the fields you need based on this
Personal Business Non-profit Choose one… Software Retail Services Other

## 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.

Billing address
500 Market Street San Francisco, CA 94105 · USA 500 Market Place Chattanooga, TN 37402 · USA 500 Market Square Pittsburgh, PA 15222 · USA Enter address manually

## Resolved address — structured fields

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
California New York Texas United States Canada United Kingdom

## 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.

## See also

- field-ui · input-ui · select-ui — form primitives.
- menu-ui — autocomplete popover host.
- form-drawer — typical host for these surfaces.
- wizard-drawer — multi-step form host.