Phone inputPro
Phone field with a searchable country picker that formats numbers as you type.
Saved as +1…
When to use
- Collecting phone numbers for sign-up, 2FA and delivery.
When not to use
- Countries not in the list: extend the exported countries array first.
Installation
Usage
Import it from @/components/ui/phone-input after installing.
example.tsx
import { PhoneInput } from "@/components/ui/phone-input";
<PhoneInput defaultCountry="GB" onValueChange={(e164, country) => setPhone(e164)} />API reference
PhoneInput
Country picker plus a national number field formatted with the country's grouping.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultCountry | string | "US" | ISO country code. |
| onValueChange | (e164: string, country: Country) => void | – | Called with +<dial><digits> on every change. |
| label | string | "Phone number" | Field label. |
countries / formatNational
The country list (code, name, dial, flag, digit groups) and the formatter, exported so you can extend them.
No props.
Keyboard interactions
| Keys | Action |
|---|---|
| EnterorSpace | Open the country list |
| ↑or↓ | Move through countries |
| Enter | Pick |
| Esc | Close |
Accessibility
- The country button names the current country and code.
- The search box is a combobox for the country listbox.
- The number uses inputMode="tel" and autocomplete="tel-national".
Motion
- The list springs open; a check pops in when the number is complete.
Responsive behavior
- Up to 384px; the list is 288px and scrolls.
Performance
- Formatting is a tiny pure function.
Notes for AI
- Store the E.164 string; validate with your SMS provider before trusting it.
This page as Markdown, for assistants and coding agents:
/components/phone-input/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt