Phone Input

ProNew

A phone number field with a country dialing code select joined to a telephone input.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/phone-input

Prop	Type	Default	Description
`value`	`string`	-	Controlled national number, kept as typed.
`defaultValue`	`string`	`""`	Initial number when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Called with the edited number.
`countryCode`	`string`	-	Controlled dialing prefix, e.g. `"+1"`.
`defaultCountryCode`	`string`	`"+1"`	Initial prefix when uncontrolled.
`onCountryCodeChange`	`(code: string) => void`	-	Called when the prefix changes.
`countries`	`PhoneCountry[]`	US, UK, India, Germany, Australia	Prefixes listed in the select.
`label`	`string`	`"Phone number"`	Accessible name of the number field.
`countryCodeName`	`string`	-	Form field name for the country code select.

Other <input> props (such as name, placeholder, required, disabled) are passed to the number field.

PhoneCountry is { code: string; label: string }.

The component does not validate or reformat numbers. Pair it with a library such as libphonenumber-js if you need that.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/phone-input

Prop	Type	Default	Description
`value`	`string`	-	Controlled national number, kept as typed.
`defaultValue`	`string`	`""`	Initial number when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Called with the edited number.
`countryCode`	`string`	-	Controlled dialing prefix, e.g. `"+1"`.
`defaultCountryCode`	`string`	`"+1"`	Initial prefix when uncontrolled.
`onCountryCodeChange`	`(code: string) => void`	-	Called when the prefix changes.
`countries`	`PhoneCountry[]`	US, UK, India, Germany, Australia	Prefixes listed in the select.
`label`	`string`	`"Phone number"`	Accessible name of the number field.
`countryCodeName`	`string`	-	Form field name for the country code select.

Other <input> props (such as name, placeholder, required, disabled) are passed to the number field.

PhoneCountry is { code: string; label: string }.

The component does not validate or reformat numbers. Pair it with a library such as libphonenumber-js if you need that.