Cascading Select | Zyeon UI

Preview in your theme

Pick a country and the region rung fetches, enables and takes focus; pick a region and the city rung follows. Keyboard: ↓/↑ or Enter opens a rung, arrows walk it, Home/End jump, typing letters highlights (never commits), Enter chooses, Esc closes without losing the value. Try Antarctica for a rung that fails and offers its own Retry, Niue for a rung that resolves to nothing, Okinawa for a city list that is legitimately empty, and Occitanie for a failing city index. Change the country afterwards and the line underneath names exactly what was cleared. The stale-answer guard is reproducible here too: choose Japan → Kantō (whose city request takes 1.5s and deliberately IGNORES its abort signal), switch to Kansai before it lands, and Kantō's full response still arrives a second later — and is thrown away, because the answer no longer matches the question. name='place' posts one hidden input per rung.

Country

Region

City

complete: false · path: —

layout='row' and no loader anywhere: all three pools ship inside the contract, and each option names its `parent`, so a whole tree is three flat arrays. Make is pre-chosen through levels[].value. 'Other model' and 'Base' carry no parent, which is how a catch-all stays available under every branch instead of being copied into each one. EX-L is present, blocked, and says why.

Make

Model

Trim

Degenerate data: a region label with no break opportunity (truncated on the trigger, wrapped in the list), a one-character label, two options that share a label but not a value, a blocked option whose API forgot the reason (the component supplies one), a committed availability zone that is not in the pool at all — printed as itself instead of silently reading as unset — and a Rack rung with an empty pool and no loader, which is an explained empty, not a spinner that never stops.

Region

Availability zone

Rack

Racks are only listed for on-prem zones.

status='ready' — untouched. Rung 1 is choosable, rungs 2 and 3 are idle: inert, still focusable, and each says which rung to fill first.

Country

Region

City

status='empty' — the level definitions themselves are not set up. A different sentence from 'the request failed'.

Nothing to choose from

These choices depend on data that has not been set up yet.

status='loading' — placeholders the size of the real rungs, aria-busy, one polite line.

status='error' — the definitions could not be fetched. role=alert, the request id survives the line break, retry is yours.

Could not load these choices

GET /v1/geo/countries timed out after 10s. request-id: 7d1a-4b02

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