Shadcn Phone Input
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.
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.
Eight 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 19 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.
Integrating With Other Components
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.