Shadcn Phone Input

Q: Does the phone input work with React Hook Form?

Yes. Use Controller from `react-hook-form` with the phone input as the controlled element. Pass value and onChange from the render prop. The E.164 output string is the field value submitted with the form.

Browse 8 production-ready shadcn phone input components for international phone number entry with country code flag dropdown. Covers basic, small, large, disabled, preset value, error state, specific default country, and read-only modes : a custom ReUI component built on Input Group primitives.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

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 the Input component
A one time code sent by text message once the number is known: use the Input Otp component
A complete personal details page with avatar, name, email and phone in one layout: use the Profile blocks

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 API docs

React Phone Number Input v3: API reference, docs

Markdownhttps://web.dev.reui.io/components/phone-input.md

MCPget_component("phone-input")

Installnpx shadcn@latest add @reui/phone-input

Full index for agents:llms.txtReUI MCP setup

Shadcn Phone Input: International Numbers with Country Flags

ReUI Phone Input is a custom shadcn component for international phone number entry. It renders a country code selector with flag icons alongside a formatted phone number input : composing shadcn Input Group, Select, and Field primitives with a country data set.

8 components cover basic phone input, small and large size variants, disabled state, preset value initialization, error state with validation feedback, specific default country selection, and read-only display mode.

The sections below cover the component architecture, real use cases in global SaaS products, features, and form integration guidance.

What is Shadcn Phone Input?

ReUI Phone Input is a custom shadcn component : not in base shadcn/ui for collecting international phone numbers. It renders a flag icon and country code as a dropdown trigger alongside a number input that formats the local part. The country selector uses shadcn's native Select or custom dropdown built on Popover, and the number input wraps the shadcn Input primitive.

The component manages country code prefix and local number separately, combining them into an E.164-formatted value for form submission. Input masking applies the correct local number format for the selected country : US numbers format as (555) 555-5555, UK numbers as 07700 900000.

Why Use Shadcn Phone Input?

Global SaaS products, e-commerce checkouts, and B2B registration flows all collect international phone numbers. A plain text input forces users to know their country code; a phone input with a country selector reduces friction and improves data quality by separating country code from local number.

Error state handling communicates invalid format (too few digits, invalid area code) and required field validation inline with the shadcn Field error slot : the same component used across all ReUI form components. Pair with Shadcn Field and Shadcn Label for consistent form layout.

Shadcn Phone Input Features

Country Flag and Code Selector. Country selector renders a flag emoji or SVG flag icon alongside the dial code. Users scroll or search the country list to switch dial codes. The selected country updates the input placeholder format.
E.164 Format Output. The component combines the selected country dial code and local number into an E.164 international format string (+14155552671) for API submission : the standard format for Twilio, Vonage, and other telephony APIs.
Default Country Preset. Initialize the selector to a specific country based on user locale, billing address, or IP geolocation : the default country component shows how to pass an ISO country code as the initial value.
Preset Value and Controlled Mode. Pass an existing E.164 phone number as the value prop and the component parses it into country code and local number : useful for edit forms where an existing phone number needs to display correctly.
Error State and Validation. Error state renders a red border on the input and country selector with an inline error message via shadcn Field : consistent with the validation UI of all other ReUI form inputs.
Size Variants. Small, default, and large size variants scale the flag selector and number input together : matching the size of adjacent form fields in compact or spacious form layouts.
Disabled and Read-Only Modes. Disabled mode prevents interaction while retaining the displayed value. Read-only mode displays the formatted number without edit controls : useful in profile summary and order confirmation screens.

ReUI Phone Input: In-House Custom Shadcn Component

ReUI Phone Input is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It is designed to integrate seamlessly into any shadcn/ui project : following the same copy-and-own installation model. The component source lands directly in your repository; you own it, extend it, and style it with your Tailwind CSS tokens. ReUI Phone Input is a custom international phone number component not available in base shadcn/ui. It is built on react-phone-number-input for country code management and E.164 formatting, wrapping the country selector and number input in shadcn Input Group primitives. Supports preset value, default country, error state, and disabled and read-only modes.

The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling : only the underlying headless primitive differs. ReUI maintains 22 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.

Always wrap Phone Input in Shadcn Field with Shadcn Label for accessible form labeling and error message display. Use the same error slot component as other ReUI form inputs for consistent validation UX.

Pair with Shadcn Input fields for adjacent email and name fields in registration or checkout forms, maintaining consistent size variants across the form.

Combine with Shadcn Select for country selection in shipping address forms where the phone input's country and the address country should stay in sync.

Form Blocks in ReUI Pro

The free examples above pair with 12 production ready form blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Form (12 blocks)Form layouts for settings, profiles, and data entry with validation and grouped fields.

Browse all Application blocks

Frequently Asked Questions

What is the output format for the phone number?

E.164 international format : a plus sign, country dial code, and local number with no spaces or punctuation (e.g., +14155552671). This is the standard format for telephony APIs like Twilio, Vonage, and AWS SNS.

How do I set a default country for the selector?

Pass a defaultCountry prop with an ISO 3166-1 alpha-2 country code (e.g., 'US', 'GB', 'DE'). The component initializes the flag and dial code to that country. Detect the user's country from their IP, browser locale, or billing address to pre-fill.

Can I validate phone numbers with Zod?

Yes. After the component outputs the E.164 string, validate it with a Zod regex: z.string().regex(/^\+[1-9]\d{1,14}$/, 'Invalid phone number'). For stricter validation, integrate a library like libphonenumber-js for per-country format checking.

How do I use preset value to populate an existing phone number?

Pass the existing E.164 phone number as the value prop. The component parses the dial code prefix to select the correct country and formats the remaining digits as the local number. The user sees the flag, country code, and formatted local number in the edit state.

Does the phone input work with React Hook Form?

Yes. Use Controller from react-hook-form with the phone input as the controlled element. Pass value and onChange from the render prop. The E.164 output string is the field value submitted with the form.

Is ReUI Phone Input different from a standard shadcn component?

Yes. ReUI Phone Input is a custom in-house component, not part of base shadcn/ui. It composes shadcn Input Group, Field, and Label primitives with international phone number formatting and country selection specific to ReUI.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.