Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA phone field with a searchable country dial-code picker beside the number input that reports one E.164 value. Use this when you collect a phone number from people in several countries.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it in sign-up, checkout and profile forms that accept international numbers. The picker searches by country name, ISO code or dial digits ("44", "+44"), and the field gives you a single normalised E.164 string such as +442071838750.
Do not use it when you need to validate that a number exists or is reachable. This pattern formats and normalises; validation against a numbering plan needs a library such as libphonenumber.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The E.164 value (controlled). |
defaultValue | string | "" | Initial E.164 value. |
onValueChange | (e164: string, country: Country) => void | - | Runs on every change. e164 is empty while no digits are typed. |
defaultCountry | string | US | ISO code used when the value has no known prefix. |
countries | Country[] | 20 countries | { code, name, dial, flag }. Pass your own list for the full set. |
disabled | boolean | false | Disables both controls. |
combobox role with aria-expanded and an accessible name that includes the chosen country and code.type="tel" with autocomplete="tel-national" and inputmode="tel"; its label is Phone number.aria-hidden; the country name is always in the row text.The pattern ships with a Testing Library test (phone-number-country-field.test.tsx) that covers the dial-code search, the E.164 output (a leading zero is dropped), changing country and switching the prefix when a full international number is pasted.