CountrySelect

Searchable country picker built on Combobox and wired to react-hook-form via useField. Stores the ISO 3166-1 alpha-2 code (e.g. 'US') in form state and renders a flag emoji next to each country name. The list opens with US, Canada, Australia, and the United Kingdom at the top.

Usage

Must be used inside a Form (or any react-hook-form provider). Drop it inside a Form.Field to get the label, description, and error wiring for free.

<Form
  onSubmit={(data) => console.table(data)}
  defaultValues={{ country: 'US' }}
  className="w-full max-w-sm"
>
  <Form.Field name="country" label="Country" required>
    <Form.CountrySelect />
  </Form.Field>
  <Form.SubmitButton>Submit</Form.SubmitButton>
</Form>

Clearable

Pass showClear to show an inline × button that resets the field to an empty string. Useful for optional country filters where “any country” is a valid selection.

<Form
  onSubmit={(data) => console.table(data)}
  defaultValues={{ country: '' }}
  className="w-full max-w-sm"
>
  <Form.Field
    name="country"
    label="Country"
    description="Optional — clear with the × button"
  >
    <Form.CountrySelect showClear placeholder="Any country" />
  </Form.Field>
  <Form.SubmitButton>Submit</Form.SubmitButton>
</Form>

Restricted list

Pass countries to limit the dropdown to a custom set — e.g. the destinations a carrier supports. The shape is { code, name }.

<Form
  onSubmit={(data) => console.table(data)}
  defaultValues={{ country: 'US' }}
  className="w-full max-w-sm"
>
  <Form.Field
    name="country"
    label="Ship to"
    description="Carrier supports a limited set of destinations"
    required
  >
    <Form.CountrySelect countries={SHIP_TO_COUNTRIES} />
  </Form.Field>
  <Form.SubmitButton>Submit</Form.SubmitButton>
</Form>

Props

Name	Type	Description
`name`	`string`	Field name. Inherited from `Form.Field` context if omitted.
`placeholder`	`string`	Placeholder text. Defaults to `'Select country'`.
`disabled`	`boolean`	Disable the input.
`showClear`	`boolean`	Show an inline × button to reset the value. Defaults to `false`.
`noAutofill`	`boolean`	Block browser/password-manager autofill. Saved-address fillers commonly target country fields and conflict with the combobox — opt in to suppress. Defaults to `false`.
`countries`	`Country[]`	Override the country list. Defaults to the full list with US/CA/AU/GB at the top.
`onChange`	`(code: string) => void`	Fires after the selected code changes. With `multiple`, `(codes: string[]) => void`.
`onBlur`	`FocusEventHandler<HTMLInputElement>`	Blur handler.
`multiple`	`boolean`	Chip multi-select. Stores an array of ISO codes.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	Trigger height. Defaults to `md`.
`openOnFocus`	`boolean`	Open the full list on focus.

Notes

Filtering is locale-aware via Base UI’s built-in Combobox filter — typing matches against the rendered label (flag + name).
Flag emojis are computed from the country code via regional indicator codepoints, so no extra dependency is required.
Pair with Form.StreetAddress to gate US-only address lookup on the selected country (see StreetAddress → “Conditional lookup”).