Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProThree linked selects where each one loads after the one before it, clears what depends on it when it changes, shows Loading and Retry states and ignores out-of-date responses. Use this when a choice narrows the next.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for addresses and any form where the second list depends on the first (country, region, city; make, model, trim), and the lists come from a server.
Do not use it when the whole tree is small and in memory, and people need to browse it. Use a cascader.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
countries | { value, label }[] | - | Top-level options. |
loadRegions | (country, { signal }) => Promise<Option[]> | - | Loads the second level. |
loadCities | (country, region, { signal }) => Promise<Option[]> | - | Loads the third level. |
value | { country, region, city } | - | The three values (controlled). |
defaultValue | { country, region, city } | all empty | Initial values. |
onValueChange | (value) => void | - | Runs on every change; cleared levels are empty strings. |
disabled and its placeholder says why (Choose a country first).Loading regions…; on failure a role="alert" message with a Retry button replaces it.Region and city cleared.The pattern ships with a Testing Library test (dependent-selects-country-region-city.test.tsx) that covers loading in order, clearing children, ignoring stale responses and retry.