## Phone Input (S—099)

A phone field with a country picker and as-you-type formatting; the caret stays put while spaces are inserted.

- URL: https://sundaeui.dev/components/phone-input
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/phone-input.json`
- Tags: country, format, form, phone, e164, input

Pick a country from a compact searchable list and the dial code and format pattern change with it. Digits are grouped as you type without the caret jumping.
A tick appears once the number has the right length for that country. The value you get back is E.164.

### Usage

```tsx
import { PhoneInput } from '@/components/sundae/phone-input'

<PhoneInput />
```

### Props

- `countries` (`{ code: string; name: string; dial: string; pattern: string }[]`, required): Countries with a # pattern such as "### ### ####".
- `defaultCountry` (`string`): ISO code.
- `onValueChange` (`(e164: string, valid: boolean) => void`): Called on input.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Sign-up, checkout and 2FA phone collection.

### When not to use

- Collecting many international numbers with edge cases: use libphonenumber.

### Accessibility

- The country picker is a listbox button with the dial code in its name.
- Validity is exposed with aria-invalid only after blur.
- Reduced motion removes the movement and keeps every state change.