"use client"; import { useId, useRef, useState } from "react"; import type { ChangeEvent, ClipboardEvent, FocusEvent, HTMLAttributes, KeyboardEvent } from "react"; export type OtpInputProps = Omit, "onChange" | "defaultValue"> & { /** Number of characters in the code. */ length?: number; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Called once every slot is filled. */ onComplete?: (value: string) => void; /** Name of the hidden input that carries the joined code in native form submission. */ name?: string; label?: string; description?: string; error?: string; disabled?: boolean; autoFocus?: boolean; mode?: "numeric" | "alphanumeric"; }; function cx(...values: Array) { return values.filter(Boolean).join(" "); } export function OtpInput({ length = 6, value, defaultValue = "", onValueChange, onComplete, name, label = "Verification code", description, error, disabled, autoFocus, mode = "numeric", className, ...props }: OtpInputProps) { const id = useId(); const labelId = id + "-label"; const descriptionId = id + "-description"; const errorId = id + "-error"; const pattern = mode === "numeric" ? /^[0-9]$/ : /^[0-9a-zA-Z]$/; const sanitize = (raw: string) => raw .split("") .filter((char) => pattern.test(char)) .join("") .toUpperCase(); const [inner, setInner] = useState(() => sanitize(defaultValue).slice(0, length)); const current = (value !== undefined ? sanitize(value) : inner).slice(0, length); const refs = useRef>([]); const focusAt = (index: number) => { const target = refs.current[Math.max(0, Math.min(index, length - 1))]; if (target) { target.focus(); target.select(); } }; const commit = (next: string) => { const clipped = next.slice(0, length); if (value === undefined) setInner(clipped); onValueChange?.(clipped); if (clipped.length === length && current.length !== length) onComplete?.(clipped); }; const fillFrom = (index: number, chars: string) => { const start = Math.min(index, current.length); const next = (current.slice(0, start) + chars).slice(0, length); commit(next); focusAt(Math.min(next.length, length - 1)); }; const setAt = (index: number, char: string) => { const start = Math.min(index, current.length); commit(current.slice(0, start) + char + current.slice(start + 1)); focusAt(start + 1); }; const removeAt = (index: number) => { if (index < 0 || index >= current.length) return; commit(current.slice(0, index) + current.slice(index + 1)); }; const handleKeyDown = (index: number) => (event: KeyboardEvent) => { const { key } = event; if (key === "Backspace") { event.preventDefault(); if (current[index]) { removeAt(index); focusAt(index); } else if (index > 0) { removeAt(index - 1); focusAt(index - 1); } return; } if (key === "Delete") { event.preventDefault(); removeAt(index); return; } if (key === "ArrowLeft") { event.preventDefault(); focusAt(index - 1); return; } if (key === "ArrowRight") { event.preventDefault(); focusAt(Math.min(index + 1, current.length)); return; } if (key === "Home") { event.preventDefault(); focusAt(0); return; } if (key === "End") { event.preventDefault(); focusAt(Math.min(current.length, length - 1)); return; } if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) { event.preventDefault(); const char = sanitize(key); if (char) setAt(index, char); } }; const handleChange = (index: number) => (event: ChangeEvent) => { // Covers mobile keyboards and one-time-code autofill, which bypass keydown. const chars = sanitize(event.target.value); if (!chars) { removeAt(index); return; } if (chars.length > 1) fillFrom(index, chars); else setAt(index, chars); }; const handlePaste = (index: number) => (event: ClipboardEvent) => { event.preventDefault(); const chars = sanitize(event.clipboardData.getData("text")); if (chars) fillFrom(index, chars); }; const handleFocus = (index: number) => (event: FocusEvent) => { if (index > current.length) { focusAt(current.length); return; } event.target.select(); }; const describedBy = cx(description && descriptionId, error && errorId) || undefined; return (

{label} {description ? (

{description}

) : null}

{Array.from({ length }, (_, index) => ( {length === 6 && index === 3 ? ( ) : null} { refs.current[index] = node; }} type="text" inputMode={mode === "numeric" ? "numeric" : "text"} autoComplete={index === 0 ? "one-time-code" : "off"} autoCapitalize="characters" spellCheck={false} autoFocus={autoFocus && index === 0} disabled={disabled} aria-label={(mode === "numeric" ? "Digit " : "Character ") + (index + 1) + " of " + length} aria-invalid={error ? true : undefined} value={current[index] ?? ""} onChange={handleChange(index)} onKeyDown={handleKeyDown(index)} onPaste={handlePaste(index)} onFocus={handleFocus(index)} className={cx( "size-11 rounded-md border bg-[#FBFBF8] text-center text-xl font-medium tabular-nums text-[#1D211F] caret-[#1E6B64] outline-none transition-[border-color,box-shadow] motion-reduce:transition-none sm:size-14", "focus-visible:border-[#1E6B64] focus-visible:ring-2 focus-visible:ring-[#1E6B64]/35 disabled:cursor-not-allowed disabled:opacity-60", "dark:bg-[#232A29] dark:text-[#E9EBE4] dark:caret-[#7FC4BA] dark:focus-visible:border-[#7FC4BA] dark:focus-visible:ring-[#7FC4BA]/40", error ? "border-[#A33228] dark:border-[#F0897D]" : "border-[#858B83] dark:border-[#6E7976]", )} /> ))}

{name ? : null}

{error ?? ""}

); }