# Shadcn Phone Input

> Open-source shadcn phone input components for international signup, contact forms, and country codes.

- Type: ReUI component, free
- Page: https://web.dev.reui.io/components/phone-input
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/phone-input.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/phone-input.md
- MCP: `get_component("phone-input")`, then `get_examples("phone-input")`
- Examples: 8

## When to use

- Sign up, contact and checkout forms that collect a number together with its country dial code
- Edit and account screens that show a saved number, either editable or read only
- Single market forms that open preset to one country and format the number the local way

## When not to use

- A plain tel field in one fixed national format with no country picker: use [Input](https://web.dev.reui.io/components/input.md) (`get_component("input")`)
- A one time code sent by text message once the number is known: use [Input Otp](https://web.dev.reui.io/components/input-otp.md) (`get_component("input-otp")`)
- A complete personal details page with avatar, name, email and phone in one layout: use the [Profile blocks](https://web.dev.reui.io/blocks/application/profile.md)

## Agent notes

- Nothing validates the number; check it yourself and pass `aria-invalid` to `PhoneInput`, which turns the country button and the field red
- `placeholder` is the only text naming the field in every example; tie a label to it by id, or pass an aria label
- Height comes from `variant` set to `sm`, `default` or `lg`, not `size`, which stays the native input attribute

## Third-party libraries

- React Phone Number Input v3: [API reference](https://catamphetamine.gitlab.io/react-phone-number-input/docs/index.html#phoneinputwithcountry), [docs](https://gitlab.com/catamphetamine/react-phone-number-input)

## Examples

- [Basic](https://web.dev.reui.io/components/phone-input/c-phone-input-1.md): Basic phone input. Best for no preset country, so a globe shows until a typed dial code or a pick from the list sets the flag.
- [Small](https://web.dev.reui.io/components/phone-input/c-phone-input-2.md): Small phone input. Best for the compact sm height for dense rows, prefilled with a Dutch mobile number beside the NL flag.
- [Large](https://web.dev.reui.io/components/phone-input/c-phone-input-3.md): Large phone input. Best for the tall lg height for roomy forms, preset to US and filled with a sample New York number.
- [Disabled](https://web.dev.reui.io/components/phone-input/c-phone-input-4.md): Disabled phone input. Best for an empty field whose country button and number box are both dimmed and closed to focus and clicks.
- [Preset Value](https://web.dev.reui.io/components/phone-input/c-phone-input-5.md): Phone input with preset value. Best for an editable field opened on a stored number, whose US flag comes from the number itself since no country is preset.
- [Error State](https://web.dev.reui.io/components/phone-input/c-phone-input-6.md): Phone input with error state. Best for the invalid look on an empty field, with the country button border and the number box both turned red.
- [Default Country](https://web.dev.reui.io/components/phone-input/c-phone-input-7.md): Phone input with specific default country. Best for a field preset to France, so the French flag shows and a typed national number formats the French way.
- [Read-Only](https://web.dev.reui.io/components/phone-input/c-phone-input-8.md): Read-only phone input. Best for a stored number the user can focus, select and copy but not retype, for summary and confirmation screens.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.