build69
Sign inGet API key
build69  /  Components  /  Masked & Validated  /  ValidatedPhoneInput

ValidatedPhoneInput

v1.0.9Updated 27 Aug 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 · 10 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>—

Related

Platform docsAll componentsSource files