React Intl Phone Number
A drop-in international phone number input — one <PhoneNumberInput> gives you a searchable flag / country-code dropdown, E.164 in/out, leveled validation, and a themeable modern look.
import PhoneNumberInput from 'react-intl-phone-number'
import 'react-intl-phone-number/styles.css'
<PhoneNumberInput
value={phone}
onChange={setPhone}
defaultCountry="TW"
validationLevel="mobile-strict"
/>
Public Wi-Fi and travel, handled by NordVPN
One tap encrypts everything, with servers in 137 countries. 10 devices per account, 30-day money-back guarantee.
Contains affiliate links
Key Features
International phone input that's correct, beautiful, and ready out of the box
Searchable country dropdown
Pick a country by flag or calling code (+886, +66…), with preferred countries on top and A→Z ordering across all ~245 regions.
E.164 in/out
value / onChange always speak E.164 (+886912345678), so you can store it or send it to your backend with no extra conversion.
Leveled validation
Three levels — strict / mobile-strict / loose — apply pattern or length checks to mobile and landline independently, with onValidityChange reporting live.
Themeable CSS
Every value is a CSS variable on .ripn-root with single-class, low-specificity selectors, so Tailwind utilities win without !important; or target parts via classNames.
Framework-agnostic
No antd, no UI-framework lock-in. The core validation logic (react-intl-phone-number/core) runs standalone on a backend or in forms — no React required.
Built-in i18n
Override every string with a messages object or your own t(key, vars) — reuse your existing react-i18next locale files as-is.
Google-grade number rules
Parsing, formatting, and validation come from Google-maintained google-libphonenumber, kept in sync with each country's telecom authority — e.g. Malaysia's variable-length mobile numbers, or the UK / Canada re-allocating ranges for anti-fraud — so you track real-world changes without hand-maintaining regex.
Controlled, accessible, error-aware
A fully controlled component with onBlur / disabled / inputRef and aria-label; after blur it can auto-show the validation error (showError → red border, role="alert", aria-invalid), plus a number-format hint tooltip.
Live Demo
This is the real <PhoneNumberInput> installed on this site — go ahead and type.
Validation level
— (valid or empty)Switch the validation level and try numbers from different countries — after blur the built-in error appears under the field (showError). Below, the E.164 output, validity, and google-libphonenumber's raw error code update live. (Rendered with the package's default light theme.)
Three Validation Levels
Choose whether mobile and landline get pattern checks or just length checks.
strictBoth mobile and landline must fully match the country's pattern — the strictest, for when precision matters.
mobile-strictMobile is pattern-validated; landline is length-checked only. A common middle ground.
looseBoth mobile and landline are length-checked only — the most permissive, for forms that just need something plausible.
Quick Start
Install, import the stylesheet, then drop in a <PhoneNumberInput>.
Install
Required peers
npm i react react-dom google-libphonenumberreact / react-dom you likely already have; google-libphonenumber is a required peer to install separately (it powers parsing and validation).
Usage
import { useState } from 'react'
import PhoneNumberInput from 'react-intl-phone-number'
import 'react-intl-phone-number/styles.css'
export default function App() {
const [phone, setPhone] = useState('')
return (
<PhoneNumberInput
value={phone}
onChange={setPhone}
defaultCountry="TW"
validationLevel="mobile-strict"
/>
)
}Common Props
Everything is fully typed, with IDE autocompletion.
valuestringControlled E.164 value (e.g. +886912345678); empty string when cleared.
onChange(value: string) => voidEmits E.164 when the number satisfies validationLevel; a partial value otherwise, empty string when there are no digits after the calling code.
validationLevelstrict | mobile-strict | looseRequired. Decides what counts as valid for both emit and the standalone validator.
defaultCountryCountryCode (e.g. "TW")Initial country; changing it adopts the new country and clears the number.
onValidityChange(isValid: boolean) => voidFires when the computed validity (per validationLevel) changes.
showError / errorboolean / ReactNodeshowError: render the built-in validation error under the input after blur (red border, role="alert", aria-invalid); error: an explicit override (e.g. a "required" message). Added in v0.2.0.
messages / t / classNamesi18n & style overridesOverride copy with a messages object or t(); target individual parts (root / select / input / error…) with classNames.
Put a correct international phone input in your React app
Free, open source, TypeScript, and antd-free. Run npm i react-intl-phone-number now.
Every tool here is free and open source
No paywall, no sign-up, and the source is public on GitHub. If one of them saved you time, buy me a coffee so the updates and the next tool keep coming.
Deal
The network you code on is rarely your own
NordVPN encrypts the whole connection: café and hotel Wi-Fi stop being someone else's listening post, and while you travel your bank app, your company dashboards and the streaming services back home still work. One tap in the app, and the NordLynx protocol keeps it fast enough that you forget it is on. One account covers 10 devices, with a 30-day money-back guarantee.
- Public Wi-Fi encrypted end to end
- Servers in 137 countries, reach home services abroad
- 10 devices per account, 30-day refund
Contains affiliate links