Phone Input

"use client";

import * as React from "react";

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add junwen-k/ui-x/phone-input
Copy

Usage#

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

Copy<PhoneInput>
  <PhoneInputCountrySelect>
    <SelectTrigger>
      <PhoneInputCountrySelectValue />
    </SelectTrigger>
    <PhoneInputCountrySelectContent>
      <PhoneInputCountrySelectOptions />
    </PhoneInputCountrySelectContent>
  </PhoneInputCountrySelect>
  <PhoneInputInput />
</PhoneInput>

Examples#

Default#

"use client";

import * as React from "react";

Separated#

"use client";

import { PhoneIcon } from "lucide-react";

Combobox#

"use client";

import * as React from "react";

Form#

import { Button } from "@/components/ui/button";
import {
  Card,

Accessibility#

The country select trigger shows only a flag — give it an accessible name, e.g. <SelectTrigger aria-label="Country" />, and label the phone input itself like any text input (via <Field> / <FieldLabel> in forms or aria-label). Flags are decorative; each option in the dropdown carries the country's name as text, so the selection is not communicated by the flag alone.

API Reference#

Styled wrappers around the Phone Input primitive — see the primitive page for the full prop tables.

PhoneInput#

Wraps Root and accepts all of its props (value, onValueChange, country, onCountryChange, preferredCountry, international, …).

PhoneInputInput#

Wraps Input, rendered as the styled Input with a stable render reference already applied.

PhoneInputCountrySelect#

The country selector, built on the styled Select and wired to the country state — value and onValueChange are managed for you. Compose it with Select's own SelectTrigger plus PhoneInputCountrySelectValue and PhoneInputCountrySelectContent, which layer country-aware behavior over the corresponding Select parts.

PhoneInputCountrySelectOptions#

Renders the full options list: the "International" item followed by every supported country with its flag, name and calling code.

PhoneInputCountrySelectItem, PhoneInputCountrySelectInternationalItem#

Individual option items for composing a custom list. PhoneInputCountrySelectItem requires a value: Country; the international item selects null.

PhoneInputFlag#

Renders the flag for a country, falling back to a globe icon for null (International).