Phone Input

Forms 6

About

Phone number field with a country dial-code picker and E.164 output from libphonenumber-js.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Phone Input to your project and fits it to your theme.

Code

How Phone Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import {
  PhoneInput,
  PhoneInputCountrySelect,
  PhoneInputField,
} from "@/components/ui/phone-input";

export default function PhoneInputDemo() {
  const [value, setValue] = React.useState("");

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <label htmlFor="phone" className="text-sm font-medium text-foreground">
        Phone number
      </label>
      <PhoneInput id="phone" defaultCountry="US" onValueChange={setValue}>
        <PhoneInputCountrySelect />
        <PhoneInputField />
      </PhoneInput>
      <p className="text-xs text-muted-foreground">E.164: {value || "—"}</p>
    </div>
  );
}