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 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.

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.