Phone Input

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

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

<PhoneInput
  placeholder="Enter phone number"
  defaultCountry="US"
  value={value}
  onChange={setValue}
/>

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

export function Pattern() {

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.

This component also accepts all props from the react-phone-number-input library.

On This Page