Build · New

Phone Input

A phone number field with a country picker behind the flag (searchable in Arabic and English, with calling codes), formatting the number as you type. It gives the number in international format (E.164).

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/phone-input

Dependencies it brings: @base-ui/react, @phosphor-icons/react, libphonenumber-js

Usage

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

<PhoneInput label="Phone number" defaultCountry="SA" onValueChange={(e164, { valid }) => save(e164, valid)} />

Examples

States and country list

A saved number (an international defaultValue picks the country), countries for a short list, error and disabled. Flags are static SVGs in public/flags, installed by @kanz/flags.

API reference

PhoneInput

Also takes <input> props (name, autoComplete…).

Prop	Type	Default	Description
`label`	`ReactNode`		Figma's Label.
`value / defaultValue`	`string`		The number in international format (“+966501234567”).
`onValueChange`	`(e164: string, details: { country, national, valid }) => void`		On every change. `valid` means a correct length and prefix for the country.
`country / defaultCountry`	`CountryCode`	`"SA"`	The selected country (ISO code).
`onCountryChange`	`(country: CountryCode) => void`		When a country is picked.
`countries`	`CountryCode[]`		Limit the list to these countries.
`flagsBase`	`string`	`"/flags"`	Where the flag SVGs are served.
`required / helperText / error / disabled`	`…`		As on Input Field.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`EnterArrowDown`	On the flag: opens the country list with its search box.
`ArrowUpArrowDown`	Between countries; Enter picks, Escape closes.
`Tab`	From the flag to the number.

ARIA

The flag button is named “Country: Saudi Arabia +966” in the page language; the flag image is decorative.
The number is type="tel" with autocomplete="tel-national", tied to the label and helper text.

Arabic and RTL notes

Mirrors

The country list follows the page: Arabic names, right to left, sorted in Arabic order.

Does not mirror

The whole field row is left to right, as numbers are written: flag on the left, then the number, in Arabic too.
Calling codes (“+966”) are isolated with <bdi dir="ltr"> in the list.

Numerals: Typed Arabic-Indic and Persian digits are stored as 0-9; the number shows in Western digits, as dialed.
Arabic typography: Country names are label-14 in the page font.
Mixed-direction text: Search finds a country by its Arabic or English name, its code or its calling code (“966”).

All components ›