intl-tel-input Svelte Themes

Intl Tel Input

A JavaScript plugin for entering, formatting and validating international telephone numbers. Includes React, Vue, Angular and Svelte components, plus TypeScript definitions.

International Telephone Input

version downloads

A JavaScript plugin for entering, formatting and validating international telephone numbers. Includes React, Vue, Angular and Svelte components, plus TypeScript definitions.

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.

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

๐Ÿ” Fast country picking

  • Search by country name or dial code
  • Full keyboard navigation

โœจ Smart defaults

  • Optionally auto-detect the user's country via IP lookup
  • Example placeholders per country

๐Ÿ“ž Formatting & output

  • Formats the number as the user types
  • Extract standard E.164 numbers to store

๐Ÿ›ก๏ธ Validation

  • Validate numbers with specific error types
  • Strict mode: only allow valid digits and enforce max length

๐ŸŒ International & accessible

  • Translated into 40+ languages, with support for RTL and alternative numerals
  • Screen reader-friendly ARIA markup

๐ŸŽ›๏ธ Customisable

  • Override CSS variables (e.g. dark mode)
  • Optionally display the dial code next to the number
  • Extensive initialisation options, methods, and events

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