Country Select

Choose a country from a list with flags and searching functionality

Use the CountrySelect component to allow users to search and select countries from a predefined list of countries, with country icons:

<CountrySelect
    name="country-select"
    showSearchBar={true}
    showSearchBarIcon={true}
    searchBarPlaceholder="Search for your country"
    whitelist={['us', 'gb', 'au']}
/>

The CountrySelect component is built on top of the Select component, meaning you can use SelectProps on your component. On top of the props of the Select component, you can also specify the following additional props on your CountrySelect:

• type: Set to 4x3 to change the aspect ratio of the flags.
• whitelist: Specify two letter country codes to only include the specified values in your select. The values must match the module import names in your countryMap.ts file.
• blacklist: If you’d like to display the whole list and only remove a few countries, you can use the blacklist prop which works in the opposite way.

Flag Type

Simply set the type prop to 4x3 to use visually smaller flag icons. By default, the aspect ratio of the flags are set to 1x1.

<CountrySelect
    name="country-select"
    showSearchBar={true}
    showSearchBarIcon={true}
    searchBarPlaceholder="Search for your country"
    whitelist={['us', 'gb', 'au']}
    type="4x3"
/>

Note that if you’re only using one type of icons, you should remove other types from your countryMap.ts.

API

type CountrySelectProps = {
    type?: '4x3'
    whitelist?: Array<keyof typeof countryMap>
    blacklist?: Array<keyof typeof countryMap>
} & Omit<SelectProps, 'itemGroups'>