# Phone Input

Phone number field with a country flag and dial code that opens a country picker. The number formats as you type, and a check appears once it’s complete.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/phone-input
```

## Import

```tsx
import { maxDigitsFor, formatPhoneNumber, phoneInfo, PhoneInput } from "@/components/ui/phone-input/phone-input";
```

## Variants

- `contact` — Contact form: `npx @lumioui/cli add pro/phone-input-contact`
- `recovery` — Recovery number: `npx @lumioui/cli add pro/phone-input-recovery`
- `signup` — Sign-up: `npx @lumioui/cli add pro/phone-input-signup`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `string` | Controlled national digits (no dial code, no formatting). |
| `defaultValue?` | `string` | Uncontrolled initial national digits. |
| `onValueChange?` | `(digits: string, info: PhoneNumberInfo) => void` | Fires with the new digits and the full parsed record. |
| `country?` | `string` | Controlled ISO country code. |
| `defaultCountry?` | `string` | Uncontrolled initial ISO country code. Default "US". |
| `onCountryChange?` | `(code: string, country: Country) => void` | Fires when the country changes (sheet pick or pasted `+` number). |
| `countries?` | `Country[]` | Country data for the picker and dial-code parsing. |
| `suggested?` | `string[]` | ISO codes pinned at the top of the picker sheet. |
| `label?` | `string` | Label above the field. In the inline variant it sits on the left. |
| `helper?` | `string` | Helper text below the field. |
| `error?` | `string` | Error message — red border, one flicker, announced politely. |
| `showValidState?` | `boolean` | When the number is complete: draw a check, light the border in the  accent and pass one sheen across the field. Default true. |
| `showSlots?` | `boolean` | Show the unfilled mask as dim digit slots that fill as you type.  Default true; off when a custom `placeholder` is passed. |
| `placeholder?` | `string` | Placeholder — defaults to the country's mask filled with zeros. |
| `variant?` | `"field" | "inline"` | "field" bordered input (default) or "inline" borderless row for a  grouped form list (Contacts). |
| `size?` | `"md" | "lg"` | Height — md 48 (forms), lg 56 (sign-up hero). |
| `disabled?` | `boolean` | Disable typing and the country button. |
| `className?` | `string` | Classes for the outer wrapper. |

## Icons rendered

- `chevron-down` — /icons.html?i=chevron-down

Source: https://lumioui.com/components/phone-input