Build an OTP Input Component

┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐
│  1 │ │  3 │ │    │ │    │ │    │ │    │   ← Individual inputs
└────┘ └────┘ └────┘ └────┘ └────┘ └────┘
  ↑      ↑      ↑
ref[0] ref[1] ref[2]  ...                  ← Ref array for focus

              [ Clear ]                      ← Reset button

        Enter your 6-digit OTP               ← Status text

const OTP_LENGTH = 6;

const [otp, setOtp] = useState<string[]>(
  Array(OTP_LENGTH).fill("")
);
// → ["", "", "", "", "", ""]

const inputRefs = useRef<(HTMLInputElement | null)[]>([]);

// Auto-focus first input on mount
useEffect(() => {
  inputRefs.current[0]?.focus();
}, []);

// Assign refs in JSX:
<input ref={(el) => { inputRefs.current[i] = el; }} />

const handleChange = (index: number, value: string) => {
  // Reject non-numeric input
  if (!/^\d*$/.test(value)) return;

  // Take only the last character (handles overwrite)
  const digit = value.slice(-1);

  const newOtp = [...otp];
  newOtp[index] = digit;
  setOtp(newOtp);

  // Auto-advance to next input
  if (digit && index < OTP_LENGTH - 1) {
    inputRefs.current[index + 1]?.focus();
  }
};

const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
  if (e.key === "Backspace" && !otp[index] && index > 0) {
    e.preventDefault(); // Stop Backspace from deleting in the previous input
    inputRefs.current[index - 1]?.focus();
  }
};

const handlePaste = (e: React.ClipboardEvent) => {
  e.preventDefault();

  // Read clipboard and keep only digits
  const pasted = e.clipboardData
    .getData("text")
    .replace(/\D/g, "")        // Strip non-digits
    .slice(0, OTP_LENGTH);     // Take at most N chars

  if (!pasted) return;

  // Distribute digits across the otp array
  const newOtp = [...otp];
  pasted.split("").forEach((char, i) => {
    newOtp[i] = char;
  });
  setOtp(newOtp);

  // Focus the next empty input, or the last one
  const focusIndex = Math.min(pasted.length, OTP_LENGTH - 1);
  inputRefs.current[focusIndex]?.focus();
};

"use client";

import { useState, useRef, useEffect } from "react";

const OTP_LENGTH = 6;

export default function OtpComponentPage() {
  const [otp, setOtp] = useState<string[]>(
    Array(OTP_LENGTH).fill("")
  );
  const [isComplete, setIsComplete] = useState(false);
  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);

  useEffect(() => {
    inputRefs.current[0]?.focus();
  }, []);

  const handleChange = (index: number, value: string) => {
    if (!/^\d*$/.test(value)) return;
    const digit = value.slice(-1);
    const newOtp = [...otp];
    newOtp[index] = digit;
    setOtp(newOtp);

    if (digit && index < OTP_LENGTH - 1) {
      inputRefs.current[index + 1]?.focus();
    }

    setIsComplete(newOtp.every((d) => d !== ""));
  };

  const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
    if (e.key === "Backspace" && !otp[index] && index > 0) {
      e.preventDefault();
      inputRefs.current[index - 1]?.focus();
    }
  };

  const handlePaste = (e: React.ClipboardEvent) => {
    e.preventDefault();
    const pasted = e.clipboardData
      .getData("text")
      .replace(/\D/g, "")
      .slice(0, OTP_LENGTH);
    if (!pasted) return;

    const newOtp = [...otp];
    pasted.split("").forEach((char, i) => {
      newOtp[i] = char;
    });
    setOtp(newOtp);

    const focusIndex = Math.min(pasted.length, OTP_LENGTH - 1);
    inputRefs.current[focusIndex]?.focus();
    setIsComplete(newOtp.every((d) => d !== ""));
  };

  const clearOtp = () => {
    setOtp(Array(OTP_LENGTH).fill(""));
    setIsComplete(false);
    inputRefs.current[0]?.focus();
  };

  return (
    <div>
      <div className="flex gap-3">
        {otp.map((digit, i) => (
          <input
            key={i}
            ref={(el) => { inputRefs.current[i] = el; }}
            type="text"
            inputMode="numeric"
            maxLength={1}
            value={digit}
            onChange={(e) => handleChange(i, e.target.value)}
            onKeyDown={(e) => handleKeyDown(i, e)}
            onPaste={handlePaste}
          />
        ))}
      </div>
      <button onClick={clearOtp}>Clear</button>
      {isComplete && <p>OTP: {otp.join("")} ✓</p>}
    </div>
  );
}