Phone input

A phone field with a country picker, formatting as you type, and E.164 output.

$npx shadcn@latest add @silicon-ui/phone-input

inputsnew

Installation

$npx shadcn@latest add @silicon-ui/phone-input

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/phone-input/phone-input.tsx
- components/silicon-ui/phone-input/phone-input.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

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

Prop	Type	Default
`label*`	`string`	—
`hideLabel`	`boolean`	`false`
`value` The number in E.164, such as "+14155550132". An empty string clears the field.	`string`	—
`defaultValue`	`string`	—
`onValueChange` Fires on every edit with the E.164 number (empty when there are no digits) and its parsed details.	`(value: string, details: PhoneInputDetails) => void`	—
`country` ISO code of the selected country.	`string`	—
`defaultCountry` ISO code used until someone picks a country or enters an international number.	`string`	`"US"`
`onCountryChange`	`(iso: string) => void`	—
`countries` Limit the picker to these ISO codes.	`string[]`	—
`preferredCountries` Pinned at the top of the picker under "Suggested".	`string[]`	`["US", "CA", "GB"]`
`description`	`string`	—
`error` Replaces the built-in validation message.	`string`	—
`validate` Show a message after blur when the number is incomplete. On by default.	`boolean`	`true`
`disabled`	`boolean`	`false`
`required`	`boolean`	—
`name` Adds a hidden input carrying the E.164 value for native form submission.	`string`	—
`id`	`string`	—
`className`	`string`	—
`onBlur`	`(event: ReactFocusEvent<HTMLInputElement>) => void`	—

Also accepts the props of HTMLAttributes.