Phone Input

Phone number with country picker, live formatting and an E.164 value. Pro · Forms and input › Numbers, codes and masks

Phone number field with a searchable country picker. Formats as you type, accepts pasted international numbers, and reports the number in E.164. name submits the E.164 value.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add phone-input

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { PhoneInput } from 'valyro-ui-pro';

Props

Prop	Type	Default
`value`	`string`		Number in E.164 (`+14155550132`); empty string when empty.
`defaultValue`	`string`	`''`	Initial `value` when uncontrolled.
`onValueChange`	`(value: string, details: PhoneInputDetails) => void`		Called with the new `value` when it changes.
`country`	`string`		Selected country (ISO code). A pasted or controlled international number switches it.
`defaultCountry`	`string`	`'US'`	Country before anything is typed (default `US`).
`onCountryChange`	`(country: string) => void`		Called with the new `country` when it changes.
`countries`	`string[]`		ISO codes to offer (default: the ~30 built-in countries).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Field height and text size, country button included.
`invalid`	`boolean`	`false`	Error border and aria-invalid on the number input (an explicit `aria-invalid` wins). A number too long for the selected country gets them on its own.
`locale`	`string`		Language of country names (default: the ThemeProvider's, then the browser's).
`labels`	`Partial<PhoneInputLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Number Input — Numeric input
OTP Input — One-time code entry
Masked Input — Masked input: cards with Luhn check, expiry, CVC, date, time
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list
Multi Select — Pick several options
Combobox — Searchable select
Listbox — Option list on the page: one or several, Shift ranges

Previous: OTP Input · Next: Masked Input · All Forms and input