PhoneInput

Phone input that stores E.164 and renders a country selector plus a national-format text input. Uses libphonenumber-js for parsing.

Installation

pnpm dlx shadcn@latest add @shadmin/phone-input

Usage

import { PhoneInput } from '@/components/admin';
 
<PhoneInput source="phone" />
<PhoneInput source="phone" defaultCountry="GB" />
<PhoneInput source="phone" allowedCountries={["US", "CA", "MX"]} />

Props

Prop	Required	Type	Default	Description
`source`	Required	`string`	-	Form field name
`defaultCountry`	Optional	`CountryCode`	`"US"`	Country used when value is empty
`allowedCountries`	Optional	`readonly CountryCode[]`	All	Restrict selectable countries
`label`	Optional	`string \| false`	Inferred	Custom label, `false` to hide
`helperText`	Optional	`ReactNode`	-	Helper text
`disabled`	Optional	`boolean`	`false`	Disable both controls
`defaultValue`	Optional	`string`	-	Initial E.164 value
`validate`	Optional	`Validator \| Validator[]`	-	Validation
`className`	Optional	`string`	-	CSS class

Storage format

E.164 strings. The component parses every keystroke via AsYouType for live formatting in the visible input; the form state holds canonical E.164.

Dependency

libphonenumber-js (~140KB). Tree-shakes when only parsePhoneNumber and AsYouType are imported.