Country Select

A searchable country picker: flag, name and dial code on every row, a Suggested group on top and the picked flag in the trigger. Search by name, ISO code or dial code. Also exports PhonePrefixSelect, a compact flag and dial-code trigger for phone numbers, and PhoneInput, which attaches it to a phone field in the same shell as text-field.

Tags: country select combobox phone flag address
Dependencies: @base-ui/react(npm, opens in a new tab)lucide-react(npm, opens in a new tab)

Props

Other props pass through to the root element.

value
string | null
An ISO 3166-1 alpha-2 code, such as "GB".
defaultValue
string | null
onValueChange
(code: string | null, country: Country | null) => void
suggested
string[]
Codes listed under "Suggested" while the search is empty.
countries
Country[]
Replace the built-in list.
size
SelectSize
Default "md"
disabled
boolean
required
boolean
name
string
Submits the ISO code with a surrounding form.
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
label
React.ReactNode
hint
React.ReactNode
Quiet text to the right of the label, such as "Optional".
description
React.ReactNode
error
React.ReactNode
Replaces the description and marks the trigger aria-invalid.
placeholder
React.ReactNode
Default "Select a country"
showDialCode
boolean
Default true
Shows each country's dial code in the list. Defaults to true.
triggerClassName
string
Classes for the trigger; className goes on the root.

Prop	Type	Default	Description
value	string \| null	–	An ISO 3166-1 alpha-2 code, such as `"GB"`.
defaultValue	string \| null	–
onValueChange	(code: string \| null, country: Country \| null) => void	–
suggested	string[]	–	Codes listed under "Suggested" while the search is empty.
countries	Country[]	–	Replace the built-in list.
size	SelectSize	"md"
disabled	boolean	–
required	boolean	–
name	string	–	Submits the ISO code with a surrounding form.
open	boolean	–
defaultOpen	boolean	–
onOpenChange	(open: boolean) => void	–
label	React.ReactNode	–
hint	React.ReactNode	–	Quiet text to the right of the label, such as "Optional".
description	React.ReactNode	–
error	React.ReactNode	–	Replaces the description and marks the trigger `aria-invalid`.
placeholder	React.ReactNode	"Select a country"
showDialCode	boolean	true	Shows each country's dial code in the list. Defaults to `true`.
triggerClassName	string	–	Classes for the trigger; `className` goes on the root.