GitHub

Phone Input

PreviousNext

Input field for phone numbers with country code selection.

Loading
Loading...
"use client";
 
import { useState } from "react";
 
import { Label } from "@/components/ui/label";
import { PhoneInput } from "@/components/ui/phone-input";
 
export function PhoneInputDemo() {
  const [value, setValue] = useState("");
 
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="account-phone">Account phone</Label>
      <PhoneInput
        className="w-full"
        clearable
        defaultCountry="US"
        id="account-phone"
        onChange={setValue}
        onClear={() => setValue("")}
        placeholder="Enter account phone"
        value={value}
      />
      <p className="text-muted-foreground text-sm">
        {value
          ? `Stored as E.164: ${value}`
          : "Used for login recovery and billing alerts."}
      </p>
    </div>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/phone-input"

Usage

"use client";
 
import { useState } from "react";
 
import { PhoneInput } from "@/components/ui/phone-input";
 
export function Example() {
  const [value, setValue] = useState("");
 
  return (
    <PhoneInput
      defaultCountry="US"
      onChange={setValue}
      placeholder="Enter phone number"
      value={value}
    />
  );
}

Props

PropTypeDefaultDescription
classNamestring-Class name applied to the input element.
placeholderstringEnter phone numberPlaceholder shown when no value is present.
valuestring-Controlled phone number value.
onChange(value: string) => void-Callback fired when the value changes.
defaultCountrystring-Initial selected country code, for example US.
fallbackCountrystring"US"Used when defaultCountry is not provided.
clearablebooleanfalseShows a clear button when a value exists.
onClear() => void-Callback fired when the clear button is used.
clearClassNamestring-Class name applied to the clear button.
disabledbooleanfalseDisables both country picker and number input.
onCountryChange(country: string | undefined) => void-Callback fired when the selected country changes.