Country Select

InstallCopy Anchor Link

pnpm exec vegastack-design verify country-select

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

UsageCopy Anchor Link

import { CountrySelect } from "@/components/ui/country-select";

const [country, setCountry] = useState<string>();
<CountrySelect value={country} onValueChange={setCountry} />;

CountrySelect is controlled: pass the selected country's ISO 3166-1 alpha-2 code as value and update it from onValueChange. The component is a single composite — there are no subcomponents to compose.

ExamplesCopy Anchor Link

AnatomyCopy Anchor Link

CountrySelect is a thin, data-fed wrapper over SearchableSelect: the dataset goes in, the ISO code comes out, and every structural decision — the Select-shaped trigger, the search field inside the panel, the check on the selected row, the clear control — belongs to that preset.

<CountrySelect value={code} onValueChange={setCode} />
// ↓ renders, internally:
//   <SearchableSelect
//     items={countries}                    ← the geo-data COUNTRIES array by default
//     value={selected} onValueChange={…}   ← the ONE selection path
//     renderItem={…}                       ← flag + name per row
//     searchLabel="Search countries"       ← the in-panel search field
//   />

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

Country selectionCopy Anchor Link

A flag + name list with type-to-filter search inside a popup; the value is the ISO 3166-1 alpha-2 code.

Selected & disabledCopy Anchor Link

With a value set, the trigger shows the country's flag + name and the matching row carries a check; disabled renders an inert trigger that won't open.

EmptyCopy Anchor Link

Nothing selected yet, so the trigger shows a muted placeholder. Open it and type to filter — when no country matches the search, the list shows the empty-results message "No country found."

Custom datasetCopy Anchor Link

Pass a countries array to restrict or extend the offered list (it defaults to the full COUNTRIES set from geo-data). The selected value is still the ISO code.

API ReferenceCopy Anchor Link

Data APICopy Anchor Link

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

CountryCopy Anchor Link

COUNTRIESCopy Anchor Link

getCountryByCode(code)Copy Anchor Link

import { getCountryByCode } from "@/lib/geo-data";

getCountryByCode("us")?.name; // "United States"  (case-insensitive)
getCountryByCode("ZZ"); // undefined

AccessibilityCopy Anchor Link

• The trigger carries role="combobox", an explicit aria-label (the selected country name, or the placeholder), and aria-expanded/aria-haspopup="dialog" (Base UI's Select-style combobox pattern — the search input lives inside the popup).
• The list is keyboard-navigable (↑/↓/Enter); typing filters by country name or code.
• Flag emoji are aria-hidden (decorative); the name carries the accessible text.
• With clearable, the clear control is a sibling of the trigger — never a child — so the trigger never becomes an interactive control containing another one.

Do / Don'tCopy Anchor Link