Let's create international phone number input with React, Tailwind CSS and Headless UI

Back in the day, users had to shout a phone number or address to a phone company employee to get connected. Though today, this approach become again popular among automated call management systems, phone inputs made great progress, coming from round plastic deals with 10 digits to modern on-screen interfaces. We are going to make one of them today. This input will be capable of: International country code integration. We will provide a clear and easily accessible country code selector, which is essential for global user bases. This feature ensures accurate number formatting. Input masking. Applying input masks simplifies the entry process by guiding users through the correct number format. This reduces errors and improves readability. Accessible country list navigation. We are going to provide users a choice from multiple countries. So they should be able to navigate and filter the list effortlessly. Create a phone field set Here is a breakdown of the whole international phone number fieldset component. CountryCodeInput provides a list-box dropdown for selecting country codes. PhoneNumberInput takes care of the phone number entry with format validation. Field from Headless UI provides the form field structure, but we can't use the library's Label component, so we have to implement basic HTMLLabelElement. import { Field } from '@headlessui/react'; import { countryList } from './countryList.ts'; import { CountryCodeInput } from './CountryCodeInput'; import { PhoneNumberInput } from './PhoneNumberInput'; const App = () => { // ... return ( Phone number: ); }; export default App; The main component (src/App.tsx) maintains two state variables: phoneNumber which stores the user's entered phone number countryCode which tracks the selected country code (defaulting to "+1"). import { useCallback, useState } from 'react'; import { countryList, CountryConfig } from './countryList.ts'; // phone number logic const [phoneNumber, setPhoneNumber] = useState(''); const handlePhoneChange = useCallback((value: string) => { setPhoneNumber(value); }, []); // country code logic const [countryCode, setCountryCode] = useState('+1'); const handleCodeChange = useCallback((nextCode?: CountryConfig['code']) => { if (nextCode) { setCountryCode(nextCode); } }, []); Country codes configuration Inside src/countryList.ts we'll define a data required to give the user a choice between multiple country phone codes and formats. CountryConfig type defines the structure for each country entry with: flag: Unicode flag emoji representation (e.g., “

Mar 12, 2025 - 10:39

Let's create international phone number input with React, Tailwind CSS and Headless UI

Back in the day, users had to shout a phone number or address to a phone company employee to get connected. Though today, this approach become again popular among automated call management systems, phone inputs made great progress, coming from round plastic deals with 10 digits to modern on-screen interfaces.

We are going to make one of them today. This input will be capable of:

International country code integration. We will provide a clear and easily accessible country code selector, which is essential for global user bases. This feature ensures accurate number formatting.
Input masking. Applying input masks simplifies the entry process by guiding users through the correct number format. This reduces errors and improves readability.
Accessible country list navigation. We are going to provide users a choice from multiple countries. So they should be able to navigate and filter the list effortlessly.

Create a phone field set

Here is a breakdown of the whole international phone number fieldset component.

CountryCodeInput provides a list-box dropdown for selecting country codes. PhoneNumberInput takes care of the phone number entry with format validation. Field from Headless UI provides the form field structure, but we can't use the library's Label component, so we have to implement basic HTMLLabelElement.

import { Field } from '@headlessui/react';

import { countryList } from './countryList.ts';
import { CountryCodeInput } from './CountryCodeInput';
import { PhoneNumberInput } from './PhoneNumberInput';

const App = () => {
  // ...
  return (
    <Field className="flex flex-col gap-2">
      <label className="cursor-pointer text-sm/6 font-medium" htmlFor={id}>
        Phone number:
      label>
      <div className="flex gap-3">
        <CountryCodeInput
          countryList={countryList}
          value={countryCode}
          onChange={handleCodeChange}
        />
        <PhoneNumberInput
          id={id}
          onChange={handlePhoneChange}
          value={phoneNumber}
        />
      div>
    Field>
  );
};

export default App;

The main component (src/App.tsx) maintains two state variables:
phoneNumber which stores the user's entered phone number
countryCode which tracks the selected country code (defaulting to "+1").

import { useCallback, useState } from 'react';
import { countryList, CountryConfig } from './countryList.ts';

// phone number logic
const [phoneNumber, setPhoneNumber] = useState('');
const handlePhoneChange = useCallback((value: string) => {
  setPhoneNumber(value);
}, []);

// country code logic
const [countryCode, setCountryCode] = useState<CountryConfig['code']>('+1');

const handleCodeChange = useCallback((nextCode?: CountryConfig['code']) => {
  if (nextCode) {
    setCountryCode(nextCode);
  }
}, []);

Country codes configuration

Inside src/countryList.ts we'll define a data required to give the user a choice between multiple country phone codes and formats.

CountryConfig type defines the structure for each country entry with:

flag: Unicode flag emoji representation (e.g., “