Phone Input
A flexible phone number input with international support, validation, and optional country selector.
The PhoneInput component provides a user-friendly way to enter and validate phone numbers, with built-in support for international formats and country selection. It enhances UX by handling formatting, validation, and country code selection automatically.
By default, this component includes a country selector. You can control its visibility using the withCountryCodeSelector prop.
Loading...
Installation
pnpm dlx shadcn@latest add https://shaddy-docs.vercel.app/r/phone-input
With default country
Loading...
Without Country Selector
Loading...
Usage
<PhoneInput
onCountryChange={(data) => console.log("Country changed:", data)}
onPhoneChange={(phone) => console.log("Phone changed:", phone)}
defaultCountry="United_States"
withCountryCodeSelector
/>Props
| Prop | Type | Description |
|---|---|---|
| onCountryChange | (data: CountryData | undefined) => void | Callback when the country selection changes. |
| onPhoneChange | (phone: string) => void | Callback when the phone number changes. |
| defaultCountry | keyof typeof CountryAlpha2 | Sets the default selected country (using its alpha-2 code). |
| withCountryCodeSelector | boolean | Show or hide the country code selector (default: true). |
Other common input props like placeholder, value, className, and disabled are also supported.
