International Telephone Input

Vue logo NEWS: we now have our own Vue component!

React logo NEWS: we now have our own React component! Play with it on Storybook!

A JavaScript plugin for entering and validating international telephone numbers. It takes a regular input field, adds a searchable country dropdown, auto-detects the user's country, displays a relevant placeholder number, formats the number as you type, and provides comprehensive validation methods. React and Vue components are also included.

Demo

Sponsored by

Twilio logo

Use Twilio's API to build phone verification, SMS 2FA, appointment reminders, marketing notifications and so much more. We can't wait to see what you build.

Features

  • Automatically select the user's current country using an IP lookup
  • Automatically set the input placeholder to an example number for the selected country
  • Navigate the country dropdown by typing a country's name, or using up/down keys
  • Automatically format the number as the user types
  • Optionally only allow numeric characters and cap the number at the maximum valid length
  • The user types their national number and the plugin gives you the full standardised international number
  • Number validation, including specific error types
  • High-resolution flag images
  • Accessibility provided via ARIA tags
  • Typescript type definitions included
  • Easily customise styles by overriding CSS variables
  • React and Vue components included
  • Translations for country names (etc) provided in many different languages
  • Lots of initialisation options for customisation, as well as public methods/events for interaction

Docs

For full documentation, including Getting Started, Initialisation Options, Instance Methods, Custom Events, and more, please see the readme.

Testing

Browser testing via