Country Picker

Pro

Searchable country list with flags and dial codes that opens from a field or settings row, or sits inline. Picking a country flies its flag into the field. Use the built-in list or bring your own.

Preview

Installation

npx @lumioui/cli add pro/country-picker

Usage

import { flagImageUrl, CountryFlag, currencyFlagCode, CountryList, CountryPicker } from "@/components/ui/country-picker/country-picker";
<CountryPicker />

Also exported: flagImageUrl, CountryFlag, currencyFlagCode, CountryList.

Examples

eSIM destination

A travel eSIM store's first step, the list inline as the whole screen (grouped inset rows on the canvas).

Onboarding residence

Step 2 of 5 in a neobank's sign-up.

Shipping country

The shipping step of an outerwear store's checkout.

API reference

CountryFlag

Prop Type Default
code string

ISO 3166-1 alpha-2 code ("GB", case-insensitive). flagcdn also serves "EU" and the UK nations ("GB-SCT").

 —
country Country

Country record — shorthand for code={country.code}.

 —
size "sm" | "md" | "lg"

Slot size — "sm" 20pt flag (chips, inline), "md" 24pt (fields, rows), "lg" 28pt (hero field).

 "md"
className string —

CountryList

Prop Type Default
value string

Controlled ISO code. Omit with defaultValue for uncontrolled use.

 —
defaultValue string

Uncontrolled initial ISO code.

 —
onValueChange (code: string, country: Country) => void

Fires with the picked ISO code.

 —
countries Country[]

Country data. Defaults to the built-in ~48-country list.

 COUNTRIES
suggested string[]

ISO codes pinned in a "Suggested" group above the full list (hidden while searching).

 —
showDialCode boolean

Show the dial code on each row. Default true.

 true
searchable boolean

Show the search field. Default true.

 true
searchPlaceholder string

Search field placeholder. Default "Search countries".

 "Search countries"
grouped boolean

Group rows into inset rounded cards (on a canvas). Default false — plain rows, for use inside a sheet.

 false
scrollEnabled boolean

Allow the list to scroll itself. Turn off when embedding in a parent ScrollView. Default true.

 true
contentInsetBottom number

Extra bottom padding inside the scroll content (safe-area, CTA bar).

 0
allLabel string

Header label of the full list. Default "All countries".

 "All countries"
className string —

CountryPicker

Prop Type Default
value string

Controlled ISO code. Omit with defaultValue for uncontrolled use.

 —
defaultValue string

Uncontrolled initial ISO code.

 —
onValueChange (code: string, country: Country) => void

Fires with the picked ISO code and its record.

 —
open boolean

Controlled sheet state. Omit with defaultOpen for uncontrolled.

 —
defaultOpen boolean

Uncontrolled initial sheet state.

 —
onOpenChange (open: boolean) => void

Fires when the sheet opens or closes.

 —
countries Country[]

Country data. Defaults to the built-in list.

 —
suggested string[]

ISO codes pinned in the "Suggested" group.

 —
trigger "field" | "row" | "none"

Trigger style: "field" form input, "row" settings row, "none" no trigger (drive open yourself — PhoneInput does). Default "field".

 —
label string

Field label above the trigger, or the row's left label.

 —
placeholder string

Trigger text with nothing picked. Default "Select country".

 —
title string

Sheet title. Default "Country or region".

 —
showDialCode boolean

Show dial codes in rows (and on the field trigger). Default true on rows, false on the trigger.

 —
searchPlaceholder string

Search field placeholder.

 —
disabled boolean —
className string —