CountrySelect

Country selector with flag display. Controlled: value (ISO 3166-1 alpha-2) drives the selection and onChange reports the newly chosen code. A native <select> overlays the flag so the picker keeps native keyboard and mobile behaviour. A divider on its trailing edge shows only when it sits inside an input (PhoneInput or InputGroup).

Usage

import { CountrySelect, countrySelectVariants, flagVariants } from "@instruments/materia-ui/components/country-select";

Best practices

CountrySelect is the flag + native-<select> picker for a known country list; when users need type-to-filter, use CountryCombobox instead.
It is controlled-only - pass value (ISO 3166-1 alpha-2) and an onChange; there is no uncontrolled/defaultValue mode.
Give each option an alpha-2 value (e.g. "US") so the overlaid flag resolves; a globe placeholder shows when the code is empty/unknown.

Props

Prop	Type	Description
aria-label	`string`	Accessible label for the select
className	`string`	Additional class name
disabled	`boolean`	Disabled state
onChange(required)	`(value: T) => void`	Callback when country changes
options(required)	`CountryOption<T>[]`	Available country options
size	`ResponsiveSize \| null`	Component size - a single token or a per-breakpoint object like `{ base: "sm", md: "lg" }`. `null` falls back to the default.
value	`T`	Currently selected country code

Also exports

constcountrySelectVariants
constflagVariants

Composition

Builds on

Center, Icon, InputGroup

Used by

PhoneInput