Phone InputNew

A phone number with its country, grouped as it's typed and given in international form.

$ pnpm dlx shadcn@latest add @dashral/phone-input

Phone number

Stored as: —

Installation

$ pnpm dlx shadcn@latest add @dashral/phone-input

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/phone-input.json

Usage

example.tsx

1import { PhoneInput } from "@/components/dashral/phone-input"
2
3<PhoneInput label="Phone" name="phone" defaultCountry="ID" onValueChange={(phone) => setPhone(phone)} />

Using the npm package? Import from @dashral/ui/components/phone-input instead, here and in the examples; the rest is the same.

Examples

Preferred countries

Listed first; paste a number with its code (+65 …) and the country follows.

For delivery updates only.

In a form

name sends the international number; countries limits the list; an error after submitting.

API reference

PhoneInput

Also takes every prop of Input(opens in a new tab).

Prop	Type	Default
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`value / defaultValue`	`string` The number in international form (E.164): "+6281234567890".	`""`
`onValueChange`	`(value, { country, national }) => void` The international number ("" when empty), the country and the digits typed.	—
`country / defaultCountry / onCountryChange`	`string` The country picked (ISO 3166: "ID"), controlled or first. Without one, it follows the number given.	`"US"`
`countries`	`string[]` Only these in the list.	`every country`
`preferredCountries`	`string[]` Listed first, above the rest.	—
`name`	`string` The form field's name; the international number is sent.	—
`placeholder / disabled / required`	As on Input.	—
`classNames`	`{ root, label, wrapper, input, description, error, trigger, content }` Classes for each part; trigger is the country button, content its list.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`Enter`or`Space`	Open the countries (on the flag)
`Type`	Search the countries by name or code
`↓`or`↑ and Enter`	Move through them and pick one

Accessibility

With label, description or error, the id, aria-describedby and aria-invalid are wired up for you.
The country button is named "Country" and the country picked; country names are in the page's language (Intl).
type="tel" with autocomplete="tel", so phones show the number pad and browsers fill it in.