Region Select

Install

pnpm dlx shadcn@latest add @vegastack/region-select

Usage

import { RegionSelect } from "@/components/ui/region-select";

const [state, setState] = React.useState("");

<RegionSelect country="US" value={state} onValueChange={setState} />;

RegionSelect is controlled: pass the selected subdivision code as value and update it from onValueChange. The country prop (an ISO-3166-1 alpha-2 code) decides which subdivisions are offered — and whether the searchable dropdown or the free-text fallback is shown.

It is a thin, data-fed wrapper over SearchableSelect for the combobox path, or Input for the fallback path. A leading MapPin icon marks the field as a location input in both modes. The dataset itself is the separate geo-data item, so installing this component alongside CountrySelect copies the ISO data once.

The control is w-full, like every other form field — constrain it with a parent (<div className="max-w-xs">), not with a width of its own.

Examples

Countries

The REGIONS dataset covers 45 countries and 1,187 subdivisions: US states, Canadian provinces, Australian states/territories, Indian states/UTs, UK regions, and high-volume billing/shipping markets across the Americas, Europe, Africa, the Middle East, and Asia-Pacific. Each supported country renders a searchable combobox with live filtering; countries outside the dataset fall back to free text.

States

A country with no predefined subdivisions (e.g. Singapore) falls back to a plain text Input so the value is still captured — and disabled makes the control inert.

Clearing

While a state is selected, the trigger carries an explicit clear control; activating it fires onValueChange("") and returns the trigger to its placeholder. Pass clearable={false} to remove it.

It replaces the old re-select-to-clear toggle, which was undiscoverable and — more importantly — computed the value inside each row's click handler while the Combobox root's onValueChange stayed unwired, so a pointer click and keyboard Enter reached the value by two different code paths. Selection now runs through one path for both.

Empty results

When a search query matches no subdivision, the listbox shows a "No state found." message. The selection is unchanged until the user picks a matching row.

API Reference

RegionSelect

className is applied to the focusable trigger/input. Use containerClassName for wrapper layout classes.

Data API

The dataset is its own registry item, geo-data, installed automatically as a dependency of this component and shared with CountrySelect — install both and the ISO data lands in your tree once. Import from your lib alias, not from the component.

import { getRegions, REGIONS, type Region } from "@/lib/geo-data";

getRegions("us").length; // 50+ (case-insensitive)
getRegions("SG"); // [] — no predefined subdivisions; use the free-text fallback

Region

Accessibility

• The trigger exposes role="combobox" with aria-expanded/aria-haspopup="dialog"; opening reveals a listbox of options with live, type-to-filter search inside the popup.
• Full keyboard support is handled by the underlying Combobox: type to filter, ↑ / ↓ to move the highlight, Enter to select, and Esc to dismiss — focus returns to the trigger on close.
• The free-text fallback is a native <input>; associate a label via id for both modes.
• Focus re-colors the trigger/search border with the ring token (border-ring/(--alpha-tint-border)) — never outline: none.

Do / Don't