Command Palette

Search for a command to run...

GitHubGitHub

Phone Input

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

Docs
Open in Open in v0

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 Open in v0

Separated

Open in Open in v0

Preferred country has been set to MY (Malaysia).

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

Combobox

Open in Open in v0

Form

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

Open in Open in v0

Your phone number is used to contact you.

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.