Vanilla JS Country Dropdown with Flag Icons & Phone Codes – CountrySelect Pro

CountrySelect Pro is a lightweight vanilla JavaScript country selector that adds a searchable dropdown with phone codes and flags to any form.

It supports any CSS framework (like Bootstrap and TailwindCSS) and uses the browser’s built‑in validation to show localized error messages.

Features:

• Built‑in Search: Filter countries by name or phone code.
• Smart Validation: Uses native browser validation with localized messages.
• Responsive Design: Dropdown adapts to mobile and desktop viewports.
• Keyboard Accessible: Full keyboard navigation (arrow keys, Escape, Enter).
• International Ready: Supports ISO country codes, flags, and phone prefixes.
• HTMX / Dynamic Content Support: Automatically initializes on new elements added via HTMX or AJAX.

Use Cases:

• Checkout & Shipping Forms: Let users select their country quickly while seeing the flag and phone code.
• Registration & Address Forms: Provide a consistent, searchable list of countries without cluttering the UI.
• Phone Number Inputs: Combine with a phone field to pre‑fill the country code based on selection.
• Multi‑language Applications: Use the country code or name as a value, and let the browser handle validation messages in the user’s language.

How To Use It:

1. Download and import the ‘country-select.min.js’ into your HTML document.

<script src="/dist/country-select.min.js"></script>

2. Add an <input> element with the class country-select (or any selector you prefer). Then initialize the library.

The script automatically scans for elements with the class .country-select on page load and after HTMX updates. If you need manual control, you can call new CountrySelect(element, options) directly.

// Initialize with default country set to United States
const countrySelect = new CountrySelect('#countryPicker', {
  defaultCountry: 'us'
});

3. All configuration options.

• defaultCountry (string): ISO 3166‑1 alpha‑2 code of the country that should be selected initially. Example: 'gr' for Greece.
• preferredCountries (array): List of country codes (uppercase) that appear at the top of the dropdown, separated from the rest. Example: ['US', 'CA', 'MX'].
• onlyCountries (array): Restrict the dropdown to a specific set of countries. If empty, all countries are shown.
• search (boolean): Enable or disable the search input inside the dropdown. Default is true.
• placeholder (string): Placeholder text displayed when no country is selected. Default is 'Select'.
• valueType (string): Determines what value is written to the underlying input. Options: 'code' (ISO code), 'name' (country name), 'phone' (phone prefix). Default is 'code'.
• schema (string): HTML template for how each country is displayed in the dropdown. Placeholders: {img}, {name}, {code}, {phone}. Default is "{img} {name}".
• schemaReturn (string): HTML template for how the selected country is displayed in the trigger. Default is the same as schema.
• dropdownWidth (string): CSS width value for the dropdown (e.g., '300px', 'auto'). Default is 'auto' which makes it match the input width.

const countrySelect = new CountrySelect('#countryPicker', {
  // options here
});

4. Events.

// Listen for the custom country-change event
document.querySelector('#countryPicker').addEventListener('country-change', function(e) {
  console.log('New country selected:', e.target.value);
});

// Standard change event also works
document.querySelector('#countryPicker').addEventListener('change', function(e) {
  // Update other parts of the form based on the selected country
  updatePhonePrefix(e.target.value);
});

Alternatives

• intl-tel-input: A popular telephone input with country dropdown, but it includes jQuery and is larger.

The post Vanilla JS Country Dropdown with Flag Icons & Phone Codes – CountrySelect Pro appeared first on CSS Script.