Phone FieldProv1.0.0
A phone number in one well: the country in its own compartment (search 240+ by name, code or dial code), the number formatting as you type, and three cells that light as it becomes possible, then valid. Paste +44… and the country follows; the value is E.164.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-phone-fieldNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import * as React from "react";
import { PhoneField } from "@/components/ui/lumen/controls/phone-field";
export function SignUpPhone() {
const [phone, setPhone] = React.useState<string | null>(null);
return <PhoneField name="phone" defaultCountry="GB" preferredCountries={["GB", "US", "IN"]} onValueChange={setPhone} />;
}Props
defaultValue / value–string (E.164)Such as "+442071838750"; the field reads the country from it.
onValueChange–(e164 | null, details) => voidE.164 once the number is possible, else null; details has country, national digits, possible and valid.
defaultCountry / country / onCountryChange"US"CountryCodeThe starting or controlled country (ISO 3166 code).
preferredCountries–CountryCode[]Listed first in the picker.
locale"en-US"stringThe language for country names (Intl.DisplayNames). Pass your app's locale.
name–stringA hidden input sends E.164 with the form.
Show all 7 propsShow fewer
labels–objectEvery word: country, search, noMatch, possible, valid, incomplete.
Source
components/ui/lumen/controls/phone-field.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
