Dependent Country and Region Select

ProNew

Two linked selects: choosing a country loads its regions and resets the region, a missing region list turns the field into free text, and a late response for a previous country is ignored. Use this when one choice decides the options of the next.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

One field's options depend on another's value (country and state, brand and model, category and subcategory), possibly loaded from a server.

Do not use it when: When the full tree is small and static, use a single grouped select, or a cascader if the user needs to see it as one path.

Installation

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.

Props

Prop	Type	Description
`loadRegions`	`(countryCode) => Promise<string[]>`	The regions of a country. `[]` means it has none.
`countries`	`{ code, name }[]`	The first select. Defaults to three sample countries.
`onChange`	`({ country, region }) => void`	Called on every change; the region is `""` right after the country changes.

Accessibility

Both controls are native selects with visible labels. The region select is disabled with a reason in its first option ("Choose a country first") instead of silently greyed out, and aria-busy while loading.
A polite status line announces loading, the number of regions, the free-text case and a failure.
Changing the country clears the region on purpose and tells the caller, so an old region can never be submitted with a new country.

Testing

The pattern ships with a Testing Library test (dependent-country-region-select.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.