The Country Select component is a form control for choosing a country from the built-in country list. It shows the flag and country name, supports search by name or ISO code, and writes the selected ISO country code to the form value.
Use it for addresses, user profiles, billing, shipping, legal forms, tax forms, tenant settings, and locale settings where the user must choose a country. Do not use it for phone dialing codes, currencies, or custom lists of regions, cities, offices, or locations.
| Prop | Type | Default |
|---|---|---|
id Unique identifier for the country select component. | string | auto-generated |
placeholder The placeholder text for the input. | string | '' |
value Selected country code, or an array of country codes in multiple mode. | string | string[] | null | null |
required Whether the input is required. | boolean | false |
disabled Whether the input is disabled. | boolean | false |
multiple Whether the user can select multiple countries. The value is an array in multiple mode. | boolean | false |
hideCheckIcon Whether to hide the check icon for selected options. | boolean | false |
clearable Whether to show a clear button when a value is selected. | boolean | false |
aria-label Accessible label for the inner select. | string | null | null |
tabIndex Tab index for the country select. | number | 0 |
aria-describedby Accessible description id for the inner select. | string | null | null |
showCountryCode Whether to show the country code in the trigger. | boolean | false |
| Event | Description |
|---|---|
| selectionChange | Event emitted when the selected value changes. |
| opened | Event emitted when the select panel is opened. |
| closed | Event emitted when the select panel is closed. |
Using this component in production?
NgStarter includes source code, admin dashboard templates, and commercial support.