Country Selector
proSearchable country dropdown with emoji flags.
Overview
The Country Selector provides a searchable dropdown of countries with optional emoji flags. Includes 54 countries with full keyboard navigation, auto-direction detection, and a sticky search input.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
name | String | "country" | Field name used in form data. |
label | String | "Country" | Label displayed above the dropdown. |
placeholder | String | "Select a country" | Placeholder text. |
defaultCountry | String | "United States" | Pre-selected country (must match exact name). |
allowSearch | Boolean | true | Enable/disable search filtering. |
showFlags | Boolean | true | Show emoji flags next to country names. |
required | Boolean | false | Whether a country must be selected. |
Features
- 54 countries with emoji flags
- Searchable dropdown with sticky search input
- Full keyboard navigation (arrows, Enter, Escape)
- Auto-direction detection (opens up or down)
- Custom trigger, dropdown, search, and option styling
- Hidden <input> for native form submission
Tips
The defaultCountry value must match the country name exactly (e.g., "United States", not "US" or "USA").
Disable showFlags if emoji rendering is inconsistent across your users' platforms.