Phone Input

A country picker with flags and dial codes, plus a number field that formats as you type. The value is E.164.

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/phone-input.json

Usage

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

<PhoneInput value={phone} onValueChange={setPhone} />
 
<PhoneInput defaultCountry="GB" countries={["GB", "IE", "CA"]} />

Value

The value is E.164, like +16045550142. An empty field gives an empty string. onValueChange also gets the country and complete, which is true once every digit of the mask is filled.

Typing or pasting a number that starts with a plus picks the country from its dial code. Canada and the US share +1, so the current country wins when both match.

A small table covers common countries, Canada and the US first. Each entry has a code, name, dial code and a mask where # is a digit. The masks are simple, so check numbers on the server if you need strict validation.

Props

value, defaultValue and onValueChange hold the E.164 value.
defaultCountry is used when the value does not pick one. It defaults to CA.
countries limits the picker to a list of codes.
invalid and disabled style the whole group.
name adds a hidden input with the E.164 value for plain forms.

Password Strength Popover

On This Page

Installation Usage Value Countries Props