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 use Base UI primitives from @base-ui/react 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.