TypeScript Phone Number Input with a Country Flag

As developers, we often come across the need to implement phone number inputs in our web applications. One common requirement is to display a country flag alongside the input field, allowing users to easily select their country code. In this blog post, we will explore different solutions to achieve this using TypeScript.

Solution 1: Using a Third-Party Library

One of the easiest ways to implement a phone number input with a country flag is by using a third-party library. There are several popular libraries available that provide ready-to-use components for this purpose. One such library is intl-tel-input.

To use intl-tel-input, you need to include the library in your project and initialize it with the appropriate options. Here’s an example:


import intlTelInput from 'intl-tel-input';

const phoneNumberInput = document.getElementById('phone-number-input');
intlTelInput(phoneNumberInput, {
  separateDialCode: true,
});

This code snippet assumes that you have an input field with the id “phone-number-input” in your HTML markup. The separateDialCode option is used to display the country code separately from the phone number input.

Solution 2: Custom Implementation

If you prefer to have more control over the implementation or want to avoid using third-party libraries, you can create a custom solution using TypeScript. Here’s an example:


const phoneNumberInput = document.getElementById('phone-number-input');
const countrySelect = document.getElementById('country-select');

// Populate the country select options
const countries = [
  { name: 'United States', code: '+1', flag: ' ' },
  { name: 'United Kingdom', code: '+44', flag: ' ' },
  // Add more countries as needed
];

countries.forEach((country) => {
  const option = document.createElement('option');
  option.value = country.code;
  option.text = `${country.flag} ${country.name} (${country.code})`;
  countrySelect.appendChild(option);
});

// Update the phone number input value when the country select changes
countrySelect.addEventListener('change', () => {
  const selectedCountry = countries.find((country) => country.code === countrySelect.value);
  phoneNumberInput.value = selectedCountry ? selectedCountry.code : '';
});

In this code snippet, we first populate a select element with country options. Each option includes the country name, flag, and country code. When the country select changes, we update the phone number input value based on the selected country code.

Conclusion

Implementing a phone number input with a country flag in TypeScript can be achieved using third-party libraries like intl-tel-input or by creating a custom solution. Both approaches have their own advantages and it’s up to you to choose the one that best fits your project requirements.

Remember to always consider the user experience and accessibility when implementing such inputs, as they play a crucial role in ensuring a seamless user interaction.

TypeScript Phone Number Input with a Country Flag