# Phone input

> Phone field with a searchable country picker that formats numbers as you type.

Component · Pro · https://lodeui.com/components/phone-input

## 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

```bash
npx shadcn@latest add @lode/phone-input
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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 |
| --- | --- |
| Enter / Space | Open the country list |
| ↑ / ↓ | 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.

## Related

- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Combobox](https://lodeui.com/components/combobox) — Searchable select for one or many values, fully keyboard driven.
- [Two-factor verification](https://lodeui.com/blocks/two-factor) — Authenticator code with resend timer, backup-code fallback and success state.