Input Phone

Phone number input with a searchable country picker, backed by react-phone-number-input. Outputs E.164 formatted values.

Open in

Preview

import { InputPhone } from "@/components/ui/input-phone"

export default function BasicExample() {
  return <InputPhone defaultCountry="IN" placeholder="Phone number" className="max-w-xs" />
}

Installation

pnpm dlx shadcn@latest add https://ui-registry-delta.vercel.app/r/input-phone.json

Usage

import { InputPhone } from "@/components/ui/input-phone"

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

Examples

Controlled

Use the value and onChange props to control the input value.

Enter your one-time password

import * as React from "react"
import { InputPhone } from "@/components/ui/input-phone"

export default function ControlledExample() {
  const [value, setValue] = React.useState("")

  return (
    <div className="flex flex-col gap-2 w-full max-w-xs">
      <InputPhone
        defaultCountry="US"
        value={value}
        onChange={setValue}
        placeholder="Phone number"
      />
      <p className="text-center text-sm">
        {value === "" ? (
          "Enter your one-time password"
        ) : (
          <>
            You entered:{" "}
            <span className="font-mono font-medium text-foreground">{value}</span>
          </>
        )}
      </p>
    </div>
  )
}

Default country

Set the initially selected country with defaultCountry. Users can still switch to any other country via the picker.

import { InputPhone } from "@/components/ui/input-phone"

export default function DefaultCountryExample() {
  return <InputPhone defaultCountry="GB" placeholder="Phone number" className="max-w-xs" />
}

One country only

Restrict the country picker to a single country by passing a single-item array to the countries prop. The country picker UI will not appear.

import { InputPhone } from "@/components/ui/input-phone"

export default function OneCountryExample() {
  return <InputPhone country="US" placeholder="Phone number" className="max-w-xs" />
}

API Reference

InputPhone

A single component that wraps react-phone-number-input. It accepts all props from RPNInput.Props except onChange, which is re-typed to receive an E.164 Value string. The most commonly used props are listed below.

Prop	Type	Default	Description
value	string	—	Controlled phone number value in E.164 format (e.g. +12025550123).
onChange	(value: Value) => void	—	Called whenever the value changes. Receives the E.164 string or an empty string when cleared.
defaultCountry	Country	"US"	ISO 3166-1 alpha-2 country code shown by default before the user selects a country.
disabled	boolean	false	Disables both the country picker and the phone number field.
placeholder	string	—	Placeholder text for the phone number input field.
international	boolean	false	When true, always formats the number in international format with the calling code prefix.
countries	Country[]	—	Restrict the country picker to a subset of countries. Pass a single-item array to hide the picker entirely.
className	string	—	Extra classes merged onto the outer wrapper element.

Accessibility

The country picker button is keyboard-focusable and opens a searchable Command popover — type to filter, use arrow keys to navigate, press Enter to select.
The outer wrapper uses a focus-within ring so the full control receives a visible focus indicator regardless of which inner element is focused.
The wrapper forwards aria-invalid for error state styling — pair it with a visible error message associated via aria-describedby on the wrapping field.
Country flags are rendered as SVGs with a title attribute containing the country name, so screen readers announce the current country selection.