Phone Input

Lightweight phone field with a searchable country dial code list and square SVG flags from the SonoJS flags CDN (emoji fallback if the image fails). Ships a local countries.json - no phone validation library. Control height matches SonoJS h-[46px].

Basic

Country dial picker with CDN SVG flags plus a national number field.

Loading…

Installation

CLI

npx @sonojs/ui@latest add phone-input

Also needs

npx @sonojs/ui@latest add input-group popover

npm i lucide-react

Usage

phone-input.tsx

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

export function Example() {
  return <PhoneInput defaultCountry="US" placeholder="Phone number" />
}

Props

Prop	Type	Default	Description
defaultCountry	string	"US"	Initial ISO2 country code when uncontrolled.
country	string	-	Controlled ISO2 country code.
onCountryChange	(country: PhoneCountry) => void	-	Fires when the selected country changes.
value	string	-	Controlled national number (without dial code).
defaultValue	string	""	Initial national number when uncontrolled.
onChange	(value: string) => void	-	Fires when the national number changes.
disabled	boolean	false	Disables the country picker and input.
placeholder	string	"Phone number"	Input placeholder.
flagCdnBase	string	SonoJS flags jsDelivr	CDN base for flag SVGs (no trailing slash). Default: `https://sonojs.github.io/SonoJS-flags`.
showFlag	boolean	true	When `false`, hides flag images and shows dial codes only.
className	string	-	Merge Tailwind classes on the input group root.