Shadcn Phone Input

Custom Shadcn Phone Input for React and Tailwind CSS. A phone number input component with country selection and validation.

Base UI Radix UI

API Reference

We used the library to create this component.

Installation


pnpm dlx shadcn@latest add @reui/phone-input

Usage

import { PhoneInput } from "@/components/reui/phone-input"

<PhoneInput
  placeholder

Shadcn Phone Input Free 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.

Number Field Rating

On This Page

Installation Usage Examples Size API Reference PhoneInput External Props

import { PhoneInput } from "@/components/reui/phone-input"

export function Pattern() {
  return (
    <PhoneInput
      variant="sm"
      placeholder="Enter phone number"
      defaultCountry="NL"
      value="+31612345678"
    />
  )
}

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.