Custom Shadcn Phone Input for React and Tailwind CSS. A phone number input component with country selection and validation.
We used the react-phone-number-input library to create this component.
import { PhoneInput } from "@/components/reui/phone-input"
export function Pattern() {Installation
pnpm dlx shadcn@latest add @reui/phone-input
Usage
import { PhoneInput } from "@/components/reui/phone-input"<PhoneInput
placeholder="Enter phone number"
defaultCountry="US"
value={value}
onChange={setValue}
/>Examples
Size
import { PhoneInput } from "@/components/reui/phone-input"
export function Pattern() {API Reference
PhoneInput
The main component for entering phone numbers with country selection.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The current phone number value in E.164 format. |
onChange | (value: string) => void | - | Callback fired when the value changes. |
variant | "sm" | "default" | "lg" | "default" | The vertical size of the input and country selector. |
popupClassName | string | - | Additional CSS classes for the country selection dropdown. |
defaultCountry | Country | - | The default country selected if no value is provided. |
placeholder | string | - | Placeholder text for the phone number input. |
className | string | - | Additional CSS classes for the root container. |
disabled | boolean | false | Whether the input and country selector are disabled. |
External Props
This component also accepts all props from the react-phone-number-input library.
More Shadcn Phone Input components
Browse 8 production-ready Shadcn Phone Input components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.
Browse all 8 Shadcn Phone Input components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.