OTP Pin Input

A segmented one-time-password (OTP) input made of individually focused digit boxes with auto-advance, backspace and arrow-key navigation, plus sibling styled variants for segment codes, verification codes, masked and stepper number fields.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds OTP Pin Input to your project and fits it to your theme.

import InputOtp from "@/components/ui/inputs-otp";

export default function InputsOtpDemo() {
  return (
    <div className="flex min-h-[200px] w-full items-center justify-center bg-background p-10">
      <InputOtp />
    </div>
  );
}