Phone Input

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

export default function Example() {
  return <PhoneInput />;
}

"use client";

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

const PhoneInput = forwardRef(({ className, ...props }, ref) => {
  return (
    <div className={cn("flex items-center", className)}>
      <span className="flex h-9 items-center rounded-l-md border border-r-0 border-input bg-muted px-3 text-sm text-muted-foreground">+1</span>
      <input
        ref={ref}
        type="tel"
        placeholder="(555) 000-0000"
        className="flex h-9 w-full rounded-r-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
        {...props}
      />
    </div>
  );
});
PhoneInput.displayName = "PhoneInput";

export { PhoneInput };