intl-tel-input Svelte Themes

Intl Tel Input

A JavaScript plugin for entering, formatting and validating international telephone numbers. React, Vue, Angular and Svelte components also included.

International Telephone Input version downloads

A JavaScript plugin for entering, formatting and validating international telephone numbers. React, Vue, Angular and Svelte components also included.

Explore docs »

Plugin screenshot showing country dropdown open Twilio

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.

React, Vue, Angular and Svelte Components

We provide React, Vue, Angular and Svelte (beta) components alongside the regular JavaScript plugin. This readme is for the JavaScript plugin. View the React Component, the Vue Component the Angular Component, or the Svelte component (beta).

Docs and Examples

We have a newly updated website, where you can find a full set of docs, a live playground where you can try out all of the options, as well as plenty of examples of different setups.

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 the 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, e.g. support dark mode
  • React, Vue, Angular and Svelte components also included
  • Translations provided in over 40 languages, as well as support for RTL layout and alternative numeral sets
  • Lots of initialisation options for customisation, as well as instance methods/events for interaction

Contributing

See the contributing guide for instructions on setting up the project and making changes, and also on how to update the flag images, or how to add a new translation.

Attributions

User testing powered by BrowserStack Open-Source Program

Browser testing via

Top categories

Loading Svelte Themes