Phone Input

Phone Input allows user to enter phone number in E.164 format.

Installation

pnpm dlx shadcn@latest add https://ui-x.junwen-k.dev/r/phone-input.json

Usage

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

<PhoneInput>
  <PhoneInputCountrySelect>
    <PhoneInputCountrySelectTrigger>
      <PhoneInputCountrySelectValue />
    </PhoneInputCountrySelectTrigger>
    <PhoneInputCountrySelectContent>
      <PhoneInputCountrySelectOptions />
    </PhoneInputCountrySelectContent>
  </PhoneInputCountrySelect>
  <PhoneInputInput />
</PhoneInput>

Examples

Default

Open in

Separated

Open in

Preferred country has been set to MY (Malaysia).

National format (default):: 012-345 6789
International format:: +60 12 345 6789

Combobox

Open in

Form

You can use parsePhoneNumber to retrieve additional information about the phone number, such as country, national number, and more.

Open in

Password Input

Password Input provides a way for the user to securely enter a password, with the ability to toggle the visibility of the password.

Time Field

Time Field allows user to enter time value.

On This Page

Installation
Usage
Examples