Getting started
Choose your integration
intl-tel-input comes in two flavours: a vanilla JavaScript library and a set of native framework components. Both offer the same core features — country selector, formatting and validation — so pick the one that matches your stack. Internally, both are powered by the same shared engine (referred to throughout these docs as the core library) — the vanilla JS library exposes it directly, while the framework components wrap it.
Vanilla JavaScript library
If you're not using a frontend framework, or prefer to manage the DOM yourself.
- Zero dependencies
- Lightweight
- Works anywhere
FAQ
Can I manually use the vanilla JavaScript library inside a React (etc) app myself?
Technically yes, but our native framework components are the recommended path - they do the heavy lifting for you so you can drop a phone input into your app in just a few lines of code:
- Lifecycle handled — initialisation on mount and
destroy()on unmount, so you don’t leak instances or listeners. - Two-way value binding — pass the number in as a prop and it stays in sync with your app’s state, with internal guards to avoid cursor jumps while typing.
- Typed change callbacks —
changeNumber,changeCountry,changeValidity, andchangeErrorCodeexposed as idiomatic, fully-typed handlers for each framework. - Escape hatch — grab the core library instance via a ref for anything the component doesn’t expose directly.
Do the components include all the core library features?
Yes — plus more. All initialisation options and methods are available through the component props and refs, and on top of that you get the framework-native conveniences like two-way binding and typed callbacks (see above).
Which version is the most “up to date”?
All versions are maintained simultaneously. When the core JavaScript logic is updated, those changes are immediately available to the React, Vue, Angular, and Svelte components.
