Region Select

InstallCopy Anchor Link

pnpm exec vegastack-design verify region-select

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

UsageCopy Anchor Link

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 an InputGroup for the free-text 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.

ExamplesCopy Anchor Link

CountriesCopy Anchor Link

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.

StatesCopy Anchor Link

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

ClearingCopy Anchor Link

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 resultsCopy Anchor Link

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 ReferenceCopy Anchor Link

RegionSelectCopy Anchor Link

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

Data APICopy Anchor Link

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

RegionCopy Anchor Link

AccessibilityCopy Anchor Link

• 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 an InputGroup with a leading pin addon and an InputGroupInput; associate a label via id for both modes.
• The trigger is a Button, so it takes the global :focus-visible background tint. The in-panel search row and the free-text fallback are text entry: while their input holds focus their border darkens subtly (border-ring/50, easing in over 150ms) and nothing fills — FOC-14's text-entry exception (MK 2026-09-27). Neither path sets outline: none without a replacement.

Do / Don'tCopy Anchor Link