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 "@desk/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

Prop	Type	Default	Description
disabled	`boolean`		Whether disabled
size	`ResponsiveSize`	`"xl"`	Trigger size — a single token or a per-breakpoint object like `{ base: "sm", md: "xl" }`. Forwarded to the underlying Button.
placeholder	`string`	`"Select…"`	Placeholder text
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
buttonClassName	`string`		Button class name
contentClassName	`string`		Class name for the popover content panel
data-testid	`string`		Test id for the trigger button
virtualization	`ComboboxVirtualizationOptions`		Virtualization settings for large item sets.
value	`string`		Current country code (ISO 3166-1 alpha-2) or country name

Composition

Builds on

Combobox