"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface CountryOption {
  code: string;
  name: string;
  dialCode: string;
  Flag: React.ComponentType<React.SVGProps<SVGSVGElement>>;
}

export interface PhoneInputProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: string;
  defaultValue?: string;
  country?: string;
  defaultCountry?: string;
  onChange?: (value: string, country: CountryOption) => void;
  label?: string;
  placeholder?: string;
  options?: CountryOption[];
}

const UsFlag = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 16" aria-hidden="true" {...props}>
    <rect width="24" height="16" rx="2" fill="var(--bg-muted)" />
    <rect width="10" height="7" rx="1" fill="var(--text-primary)" />
    <rect y="7" width="24" height="3" fill="var(--text-foreground)" />
    <rect y="12" width="24" height="2" fill="var(--text-muted-foreground)" />
  </svg>
);

const UkFlag = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 16" aria-hidden="true" {...props}>
    <rect width="24" height="16" rx="2" fill="var(--text-foreground)" />
    <path
      d="M0 0l10 7-10 7V0zm24 0v14L14 7l10-7z"
      fill="var(--bg-muted)"
    />
    <rect x="10" width="4" height="16" fill="var(--text-primary)" />
    <rect y="6" width="24" height="4" fill="var(--text-primary)" />
  </svg>
);

const EuFlag = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 16" aria-hidden="true" {...props}>
    <rect width="24" height="16" rx="2" fill="var(--text-primary)" />
    <circle cx="8" cy="8" r="2" fill="var(--text-foreground)" />
    <circle cx="16" cy="8" r="2" fill="var(--text-foreground)" />
  </svg>
);

const CaFlag = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 16" aria-hidden="true" {...props}>
    <rect width="24" height="16" rx="2" fill="var(--bg-muted)" />
    <rect x="9" width="6" height="16" fill="var(--text-foreground)" />
    <path
      d="M12 4l1 2 2 .5-1.5 1.5.5 2-2-1-2 1 .5-2L9 6.5 11 6z"
      fill="var(--text-primary)"
    />
  </svg>
);

const defaultCountries: CountryOption[] = [
  { code: "US", name: "United States", dialCode: "+1", Flag: UsFlag },
  { code: "GB", name: "United Kingdom", dialCode: "+44", Flag: UkFlag },
  { code: "EU", name: "Europe", dialCode: "+43", Flag: EuFlag },
  { code: "CA", name: "Canada", dialCode: "+1", Flag: CaFlag },
];

const formatPhoneValue = (digits: string) => {
  if (digits.length <= 3) return digits;
  if (digits.length <= 6) return `${digits.slice(0, 3)} ${digits.slice(3)}`;
  return `${digits.slice(0, 3)} ${digits.slice(3, 6)} ${digits.slice(6, 10)}`;
};

export function PhoneInput({
  value,
  defaultValue = "",
  country,
  defaultCountry,
  onChange,
  label,
  placeholder = "555 123 4567",
  options = defaultCountries,
  className,
  ...props
}: PhoneInputProps) {
  const isValueControlled = value !== undefined;
  const isCountryControlled = country !== undefined;
  const [internalValue, setInternalValue] = React.useState(defaultValue);
  const [internalCountry, setInternalCountry] = React.useState(
    defaultCountry ?? options[0]?.code ?? "US"
  );
  const [open, setOpen] = React.useState(false);
  const containerRef = React.useRef<HTMLDivElement | null>(null);

  const selectedCountry =
    options.find((option) => option.code === (country ?? internalCountry)) ??
    options[0];
  const inputValue = isValueControlled ? value ?? "" : internalValue;

  React.useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (!containerRef.current) return;
      if (!containerRef.current.contains(event.target as Node)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const handlePhoneChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const digits = event.target.value.replace(/\D/g, "").slice(0, 10);
    const formatted = formatPhoneValue(digits);

    if (!isValueControlled) {
      setInternalValue(formatted);
    }

    const fullValue = `${selectedCountry?.dialCode} ${formatted}`.trim();
    if (selectedCountry) {
      onChange?.(fullValue, selectedCountry);
    }
  };

  const handleSelectCountry = (option: CountryOption) => {
    if (!isCountryControlled) {
      setInternalCountry(option.code);
    }
    setOpen(false);
    const fullValue = `${option.dialCode} ${inputValue}`.trim();
    onChange?.(fullValue, option);
  };

  const FlagIcon = selectedCountry?.Flag ?? UsFlag;

  return (
    <div
      ref={containerRef}
      className={cn("w-full max-w-md space-y-2", className)}
      {...props}
    >
      {label ? (
        <label className="text-sm font-medium text-foreground">{label}</label>
      ) : null}
      <div className="flex w-full gap-2">
        <div className="relative">
          <button
            type="button"
            onClick={() => setOpen((prev) => !prev)}
            aria-haspopup="listbox"
            aria-expanded={open}
            className={cn(
              "flex h-10 items-center gap-2 rounded-lg border border-border bg-card px-3 text-sm text-foreground",
              "transition focus-visible:outline-none"
            )}
          >
            <FlagIcon className="h-4 w-6" />
            <span>{selectedCountry?.dialCode}</span>
            <svg
              className="h-3 w-3 text-muted-foreground"
              viewBox="0 0 20 20"
              aria-hidden="true"
            >
              <path
                d="M5 7l5 5 5-5"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </button>
          {open ? (
            <div
              className="absolute left-0 z-10 mt-2 w-48 rounded-lg border border-border bg-card p-1"
              role="listbox"
            >
              {options.map((option) => {
                const OptionFlag = option.Flag;
                return (
                  <button
                    key={option.code}
                    type="button"
                    onClick={() => handleSelectCountry(option)}
                    className={cn(
                      "flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm text-foreground",
                      "transition hover:bg-muted"
                    )}
                    role="option"
                    aria-selected={option.code === selectedCountry?.code}
                  >
                    <OptionFlag className="h-4 w-6" />
                    <span className="flex-1">{option.name}</span>
                    <span className="text-xs text-muted-foreground">
                      {option.dialCode}
                    </span>
                  </button>
                );
              })}
            </div>
          ) : null}
        </div>
        <input
          type="tel"
          inputMode="tel"
          value={inputValue}
          onChange={handlePhoneChange}
          placeholder={placeholder}
          className={cn(
            "h-10 flex-1 rounded-lg border border-border bg-card px-3 text-sm text-foreground",
            "placeholder:text-muted-foreground focus-visible:outline-none"
          )}
        />
      </div>
    </div>
  );
}
Phone Input

Dependencies

Files

Installation
