Phone Input

A phone number field with a searchable country picker and a national-number input on a shared Input Group surface. Built on libphonenumber-js for as-you-type formatting; the committed value is always E.164 (+14155550123).

Import

import { PhoneInput } from "@photon-ai/pho-ui/components/phone-input";

Anatomy

The left addon is a Combobox trigger showing the country flag and calling code (+1). Opening it reveals a search field that matches country name (English + the user’s locale), calling code (86 / +86), ISO alpha-2 (CN), and alpha-3 (CHN). Flags come from country-flag-icons. The right control is a type="tel" input that formats as you type.

const [phone, setPhone] = useState("");
const [valid, setValid] = useState(false);

<PhoneInput
  label="Phone number"
  value={phone}
  onValueChange={(value, { isValid }) => {
    setPhone(value);
    setValid(isValid);
  }}
/>;

Sizes

Same three sizes as Input / Input Group — sm, md, lg.

<PhoneInput size="sm" label="Small" />
<PhoneInput size="md" label="Medium" />
<PhoneInput size="lg" label="Large" />

Default country

defaultCountry sets the starting country when the value has none. Defaults to "US". Pasting a full international number (starting with +) updates the country automatically.

<PhoneInput defaultCountry="GB" label="UK number" />

Props

• value / defaultValue — string — controlled / uncontrolled E.164 value ("" when empty)
• onValueChange — (value, { country, isValid }) => void — fires on every edit; value is E.164 or ""
• defaultCountry — CountryCode (default "US") — country when the value has none
• countries — CountryCode[] — restrict the picker (defaults to every libphonenumber country)
• size — "sm" · "md" · "lg" (default "md")
• invalid — boolean — error ring + error-colored hint
• label / hint / labelTrailing — field chrome, same as Input
• wrapperClassName — class on the Input Group surface
• Plus native <input> attributes (id, disabled, required, placeholder, aria-label, …), minus type / onChange / size