Skip to content
Components

CountryCombobox

Specialized combobox for country selection Uses ISO 3166-1 alpha-2 country codes from countries-list package Automatically handles country code/name conversion

Usage

import { CountryCombobox } from "@instruments/materia-ui/components/country-combobox";

Best practices

  • Feed value an ISO alpha-2 code ("US") or a full country name ("United States") - both resolve - but onValueChange always returns the code.

  • Don't pass items; CountryCombobox supplies the full country list itself. For a non-country searchable list, use the base Combobox.

Props

PropTypeDefaultDescription
disabledboolean

Whether disabled

onValueChange((value: string) => void) & ((countryCode: string) => void)

Called with the selected value, or "" when the selection is toggled off. Value change handler - receives ISO country code

sizeResponsiveSize"xl"

Trigger size - a single token or a per-breakpoint object like { base: "sm", md: "xl" }. Forwarded to the underlying Button.

placeholderstring"Select…"

Placeholder text

buttonClassNamestring

Button class name

contentClassNamestring

Class name for the popover content panel

data-testidstring

Test id for the trigger button

virtualizationComboboxVirtualizationOptions

Virtualisation settings for large item sets.

valuestring

Current country code (ISO 3166-1 alpha-2) or country name

Composition

Builds on

Combobox