32 lines
787 B
TypeScript
32 lines
787 B
TypeScript
"use client";
|
|
|
|
import { useRef } from "react";
|
|
|
|
export default function OTPInput() {
|
|
const refs = useRef<(HTMLInputElement | null)[]>([]);
|
|
|
|
const handleChange = (
|
|
e: React.ChangeEvent<HTMLInputElement>,
|
|
index: number
|
|
) => {
|
|
if (e.target.value && index < 5) {
|
|
refs.current[index + 1]?.focus();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex gap-3">
|
|
{[...Array(6)].map((_, index) => (
|
|
<input
|
|
key={index}
|
|
maxLength={1}
|
|
ref={(el) => {
|
|
refs.current[index] = el;
|
|
}}
|
|
onChange={(e) => handleChange(e, index)}
|
|
className="h-16 w-16 rounded-xl border border-slate-700 bg-[#13233a] text-center text-2xl text-white outline-none focus:border-teal-400"
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
} |