{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"otp-input","type":"registry:component","title":"OTP input","description":"Six slots mirror one real input, so paste and SMS autofill just work.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/otp-input.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\ntype Status = \"idle\" | \"checking\" | \"error\" | \"success\";\n\nconst ICON_SWAP = { type: \"spring\", duration: 0.3, bounce: 0 } as const;\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n// Long enough to register the red and the shake, short enough that retyping\n// never feels blocked.\nconst ERROR_HOLD = 700;\nconst SUCCESS_HOLD = 2000;\n// Slot geometry, in px: w-10 slots with gap-2 between them.\nconst GAP = 8;\nconst SLOT_STEP = 40 + GAP;\n\n// Keyframes suit both: the caret loops forever and the shake is a one-shot\n// that nothing interrupts.\nconst CSS = `\n@keyframes otp-caret {\n 0%, 50% { opacity: 1; }\n 50.01%, 100% { opacity: 0; }\n}\n@keyframes otp-shake {\n 0% { translate: 0; }\n 20% { translate: -6px; }\n 40% { translate: 5px; }\n 60% { translate: -3px; }\n 80% { translate: 1.5px; }\n 100% { translate: 0; }\n}\n.otp-caret { animation: otp-caret 1s infinite; }\n.otp-shake { animation: otp-shake 300ms cubic-bezier(0.23, 1, 0.32, 1); }\n@media (prefers-reduced-motion: reduce) {\n .otp-caret, .otp-shake { animation: none; }\n}\n`;\n\nexport function OtpInput({\n length = 6,\n onVerify,\n hint,\n label = \"One-time code\",\n autoFocus = false,\n className,\n}: {\n length?: number;\n onVerify: (code: string) => boolean | Promise;\n hint?: string;\n label?: string;\n autoFocus?: boolean;\n className?: string;\n}) {\n const reduceMotion = useReducedMotion();\n const hintId = useId();\n const inputRef = useRef(null);\n const timer = useRef>(undefined);\n const attempt = useRef(0);\n const [value, setValue] = useState(\"\");\n const [focused, setFocused] = useState(false);\n const [status, setStatus] = useState(\"idle\");\n\n useEffect(() => {\n const attempts = attempt;\n return () => {\n clearTimeout(timer.current);\n // Drops any verification that resolves after unmount.\n attempts.current++;\n };\n }, []);\n\n // A code screen exists to take the code, so typing should work straight\n // away, and a digit typed after focus has wandered off to nothing brings\n // it back instead of being lost. Keys meant for another field are left\n // alone.\n useEffect(() => {\n // Inert copies, like the index preview, never take focus or keys.\n if (!autoFocus || inputRef.current?.closest(\"[inert]\")) return;\n inputRef.current?.focus({ preventScroll: true });\n const onKeyDown = (e: KeyboardEvent) => {\n if (!/^\\d$/.test(e.key) || e.metaKey || e.ctrlKey || e.altKey) return;\n const current = document.activeElement;\n if (current && current !== document.body) return;\n inputRef.current?.focus({ preventScroll: true });\n };\n document.addEventListener(\"keydown\", onKeyDown);\n return () => document.removeEventListener(\"keydown\", onKeyDown);\n }, [autoFocus]);\n\n const reset = () => {\n setValue(\"\");\n setStatus(\"idle\");\n inputRef.current?.focus();\n };\n\n const verify = async (code: string) => {\n const id = ++attempt.current;\n setStatus(\"checking\");\n let ok = false;\n try {\n ok = await onVerify(code);\n } catch {\n // A failed check reads as a wrong code rather than a stuck input.\n }\n if (id !== attempt.current) return;\n setStatus(ok ? \"success\" : \"error\");\n clearTimeout(timer.current);\n timer.current = setTimeout(reset, ok ? SUCCESS_HOLD : ERROR_HOLD);\n };\n\n const onChange = (raw: string) => {\n const next = raw.replace(/\\D/g, \"\").slice(0, length);\n setValue(next);\n if (next.length === length) verify(next);\n };\n\n // Slots only fill left to right, so a click anywhere lands the caret at\n // the end. A real selection (like select all) is left alone.\n const keepCaretAtEnd = () => {\n const input = inputRef.current;\n if (!input || input.selectionStart !== input.selectionEnd) return;\n const end = input.value.length;\n if (input.selectionStart !== end) input.setSelectionRange(end, end);\n };\n\n const locked = status !== \"idle\";\n const active = focused && !locked ? Math.min(value.length, length - 1) : -1;\n\n return (\n
\n \n {/* The one real input sits over the slots with invisible text, so\n paste, SMS autofill, selection and backspace all stay native. */}\n \n onChange(e.target.value)}\n onFocus={() => {\n setFocused(true);\n // The browser places the caret after focus fires.\n requestAnimationFrame(keepCaretAtEnd);\n }}\n onBlur={() => setFocused(false)}\n onSelect={keepCaretAtEnd}\n readOnly={locked}\n type=\"text\"\n inputMode=\"numeric\"\n autoComplete=\"one-time-code\"\n pattern=\"\\d*\"\n maxLength={length}\n aria-label={label}\n aria-describedby={hint ? hintId : undefined}\n aria-invalid={status === \"error\"}\n spellCheck={false}\n // 16px text stops iOS from zooming the page on focus.\n className=\"absolute inset-0 z-10 cursor-text bg-transparent text-base text-transparent caret-transparent outline-hidden selection:bg-transparent\"\n />\n {Array.from({ length }, (_, i) => (\n \n ))}\n {/* One focus ring for the whole code, gliding to the next slot as\n each digit lands, so the eye is led along instead of watching\n one box switch off and the next switch on. */}\n \n {/* The seal's single outline, drawn around where the slots end up,\n so it has no seams where the six boxes meet. It waits until the\n 320ms close is nearly done, or the slots would overhang it. */}\n \n
\n\n {/* All three messages share one grid cell, so swapping never shifts\n anything and the cell keeps the width of the longest. */}\n

\n \n \n {hint}\n \n \n \n Wrong code, try again\n \n \n \n \n \n Verified\n \n

\n\n \n {status === \"success\"\n ? \"Code verified\"\n : status === \"error\"\n ? \"Wrong code. The field was cleared, try again.\"\n : \"\"}\n \n \n );\n}\n\nfunction Message({\n visible,\n children,\n}: {\n visible: boolean;\n children: React.ReactNode;\n}) {\n return (\n \n {children}\n \n );\n}\n\nfunction Slot({\n char,\n caret,\n caretKey,\n status,\n offset,\n edge,\n reduceMotion,\n}: {\n char: string | undefined;\n caret: boolean;\n caretKey: number;\n status: Status;\n offset: number;\n edge: \"start\" | \"middle\" | \"end\";\n reduceMotion: boolean | null;\n}) {\n // A verified code seals: the slots slide together into one bar, their\n // inner walls and corners dissolve, and the six boxes become one field.\n const sealed = status === \"success\";\n return (\n \n {char ? (\n // Keyed by the digit so a replaced digit lifts in again. Deleting\n // unmounts it, so removals vanish with no exit.\n \n {char}\n \n ) : caret ? (\n // Remounts on every keystroke so the caret restarts solid while\n // typing, like a native caret.\n \n ) : null}\n \n );\n}\n\nexport default function OtpInputDemo() {\n return (\n code === \"123456\"}\n />\n );\n}\n"},{"path":"hooks/use-reduced-motion.ts","type":"registry:hook","target":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n"}],"categories":["inputs"],"docs":"From ui lab: https://lab.xevrion.dev/lab/otp-input"}