"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

export interface PinInputProps {
  length?: number;
  value?: string;
  onChange?: (value: string) => void;
  onComplete?: (value: string) => void;
  disabled?: boolean;
  className?: string;
  inputClassName?: string;
  "aria-label"?: string;
}

export function PinInput({
  length = 6,
  value = "",
  onChange,
  onComplete,
  disabled = false,
  className,
  inputClassName,
  "aria-label": ariaLabel = "Pin input",
}: PinInputProps) {
  const inputRefs = React.useRef<(HTMLInputElement | null)[]>([]);
  const [pin, setPin] = React.useState<string[]>(
    value
      .split("")
      .slice(0, length)
      .concat(Array(length).fill(""))
      .slice(0, length)
  );
  const [activeIndex, setActiveIndex] = React.useState<number | null>(null);

  React.useEffect(() => {
    const newPin = value.split("").slice(0, length);
    while (newPin.length < length) newPin.push("");
    setPin(newPin);
  }, [value, length]);

  const focusInput = (index: number) => {
    if (index >= 0 && index < length) {
      inputRefs.current[index]?.focus();
    }
  };

  const handleChange = (index: number, char: string) => {
    if (disabled) return;

    const digit = char.replace(/[^0-9]/g, "").slice(-1);
    const newPin = [...pin];
    newPin[index] = digit;
    setPin(newPin);

    const newValue = newPin.join("");
    onChange?.(newValue);

    if (digit && index < length - 1) {
      focusInput(index + 1);
    }

    if (newPin.every((d) => d !== "") && newPin.length === length) {
      onComplete?.(newValue);
    }
  };

  const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Backspace") {
      e.preventDefault();
      if (pin[index]) {
        handleChange(index, "");
      } else if (index > 0) {
        focusInput(index - 1);
        handleChange(index - 1, "");
      }
    } else if (e.key === "ArrowLeft" && index > 0) {
      e.preventDefault();
      focusInput(index - 1);
    } else if (e.key === "ArrowRight" && index < length - 1) {
      e.preventDefault();
      focusInput(index + 1);
    }
  };

  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
    e.preventDefault();
    if (disabled) return;

    const pastedData = e.clipboardData
      .getData("text")
      .replace(/[^0-9]/g, "")
      .slice(0, length);
    if (!pastedData) return;

    const newPin = [...pin];
    for (let i = 0; i < pastedData.length; i += 1) {
      newPin[i] = pastedData[i];
    }
    setPin(newPin);

    const newValue = newPin.join("");
    onChange?.(newValue);

    if (pastedData.length === length) {
      onComplete?.(newValue);
      focusInput(length - 1);
    } else {
      focusInput(pastedData.length);
    }
  };

  return (
    <div
      className={cn("flex gap-3", className)}
      role="group"
      aria-label={ariaLabel}
    >
      {Array.from({ length }).map((_, index) => {
        const isActive = activeIndex === index;
        const isFilled = Boolean(pin[index]);

        return (
          <motion.div
            key={index}
            className={cn(
              "flex h-12 w-11 items-center justify-center rounded-lg border border-input bg-background",
              "transition-colors duration-200",
              disabled && "cursor-not-allowed opacity-50"
            )}
            animate={{
              boxShadow: isActive
                ? "0 0 0 3px hsl(var(--primary) / 0.2), 0 10px 24px hsl(var(--primary) / 0.2)"
                : isFilled
                ? "0 0 0 1px hsl(var(--primary) / 0.15)"
                : "0 0 0 0px transparent",
              borderColor: isActive
                ? "hsl(var(--primary))"
                : "hsl(var(--border))",
              transform: isActive ? "translateY(-1px)" : "translateY(0px)",
            }}
            transition={{ duration: 0.2, ease: "easeOut" }}
          >
            <input
              ref={(el) => {
                inputRefs.current[index] = el;
              }}
              type="text"
              inputMode="numeric"
              autoComplete="one-time-code"
              maxLength={1}
              value={pin[index] || ""}
              onChange={(e) => handleChange(index, e.target.value)}
              onKeyDown={(e) => handleKeyDown(index, e)}
              onPaste={handlePaste}
              onFocus={() => setActiveIndex(index)}
              onBlur={() => setActiveIndex(null)}
              disabled={disabled}
              aria-label={`Digit ${index + 1} of ${length}`}
              className={cn(
                "h-full w-full rounded-lg bg-transparent text-center text-lg font-semibold text-foreground",
                "focus:outline-none",
                inputClassName
              )}
            />
          </motion.div>
        );
      })}
    </div>
  );
}
Pin Input

Dependencies

Files

Installation
