Phone Input

Docs

Phone Input

Input field for phone numbers with country code selection.

Enter a phone number to see it here

Examples

Enter a phone number to see it here

Phone number: +14155552671

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

<PhoneInput
  value={phoneNumber}
  onChange={setPhoneNumber}
  placeholder="Enter your phone number"
  defaultCountry="US"
/>

Prop	Type	Default	Description
`className`	`string`	`-`	The class name to apply to the component.
`placeholder`	`string`	`Enter phone number`	Placeholder text for the input field.
`onChange`	`(value: string) => void`	`-`	Callback when phone number value changes.
`value`	`string`	`-`	The phone number value.
`clearable`	`boolean`	`false`	Whether to show a clear button.
`onClear`	`() => void`	`-`	Callback when clear button is clicked.
`clearClassName`	`string`	`-`	Class name to apply to the clear button.
`defaultCountry`	`string`	`-`	The default country code (e.g., "US").
`fallbackCountry`	`string`	`"AU"`	The fallback country if no default is provided.
`disabled`	`boolean`	`false`	Whether the input is disabled.

Contribute