Phone Input

Overview

The PhoneInput component provides an international phone number input with a country selector dropdown. It automatically validates and formats phone numbers into E.164 format using google-libphonenumber, and shows inline error feedback for invalid numbers.

Import

import { PhoneInput } from "@px-ui/forms";

Usage

import { useState } from "react";
import { PhoneInput } from "@px-ui/forms";

function Example() {
  const [phone, setPhone] = useState("");

  return <PhoneInput value={phone} onChange={setPhone} />;
}

Examples

Default Country

Use the country prop to set the default selected country. Accepts ISO 3166-1 alpha-2 codes (lowercase).

<PhoneInput value={phone} onChange={setPhone} country="us" />
<PhoneInput value={phone} onChange={setPhone} country="gb" />
<PhoneInput value={phone} onChange={setPhone} country="in" />

Validation

PhoneInput has built-in validation powered by google-libphonenumber. Invalid numbers display an error message and red styling. You can also force the error state externally via the error prop.

{/* Built-in validation */}
<PhoneInput value={phone} onChange={setPhone} />

{/* External error state */}
<PhoneInput value={phone} onChange={setPhone} error />

Disabled

<PhoneInput value="+14155552671" onChange={() => {}} disabled />

API Reference

PhoneInput

Notes

• Valid phone numbers are automatically formatted to E.164 (e.g., +14155552671).
• Invalid numbers pass through the raw input string to onChange.
• The country dropdown allows users to switch countries at any time; validation adjusts to the selected region.