build69
build69  /  Components  /  Masked & Validated  /  ValidatedPhoneInput

ValidatedPhoneInput

v1.0.17Updated 19 Oct 2026

Masked phone input with country-specific completeness validation across 12 countries (TH/US/UK/SG/AU/JP/KR/CN/PH/MY/ID/VN). Searchable country picker on the left, masked local number on the right (react-imask), plus E.16

View source← Back to catalog

Preview

Live · 11 stories
ThaiByDefaultOpen ↗
▸Why this is recommendedformphonevalidationmask+4

ValidatedPhoneInput — thai by default.

Recommended for+14
  • ✓International signups
  • ✓KYC / contact capture
  • ✓SMS-verification flows
  • ✓Shipping-address phone field
Tags+6
formphonevalidationmaskcountrye164internationalthaibydefault
Features+4
  • Country-specific digit-length + mask validation (12 countries)
  • Searchable country picker (name / ISO / dial code)
  • react-imask masked entry
  • E.164 normalisation via toE164() helper
  • showE164Format renders normalised number below
  • Lockable to a single country (showCountryPicker=false)
  • Server-error injection
  • i18n: labels prop + country names localized via Intl.DisplayNames (LocaleProvider locale)
Not recommended for−2
  • ✕Free-text input (use Input)
  • ✕Display-only formatting (use InputMask)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "ValidatedPhoneInput" })

Usage

import { ValidatedPhoneInput } from '@/components/inputs/validated-phone-input';

<ValidatedPhoneInput
  label="Mobile number"
  value={phone}
  onValueChange={setPhone}
  country={country}
  onCountryChange={setCountry}
  required
  showE164Format
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Raw local-number value

string—
onValueChange

Value callback

function—
country

Active ISO country

PhoneCountry—
onCountryChange

Country callback

function—
availableCountries

Restrict picker list

PhoneCountry[]—
showCountryPicker

Show the leading picker (default true)

boolean—
showE164Format

Show normalised E.164 below

boolean—
validateOn

Validation timing

'on-blur' | 'on-change' | 'on-submit'—
serverError

Forced server-side error

string—
labels

Override built-in UI strings (i18n)

Partial<ValidatedPhoneInputLabels>—
aria-invalid

Mark the field invalid from outside; the box paints the same destructive state as its own validation, with the alert in its own trailing slot (FormField clones this in from its error prop)

boolean—
aria-describedby

Id(s) of outside hint or error text, kept alongside the messages the field owns (FormField clones this in)

string—
aria-required

Mark the input required for assistive tech (FormField clones this in from its required prop)

boolean—
aria-label

Accessible name where the layout has no room for a visible `label` — a filter row, a subscribe box beside its button. Prefer `label`: a visible one names the field for everybody. These components destructure a fixed prop set and used to DROP an aria-label a caller wrote, so such a field announced as nothing but its role.

string—

Related

Platform docsAll componentsSource files