OTP Input

Component 799

About

A one-time-code input with per-character cells, animated character crossfade, paste and keyboard navigation, and error/success validation states.

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

Code

How OTP Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  OtpInput,
  type OtpInputHandle,
  type OtpStatus,
} from "@/components/ui/otp-input";
import * as React from "react";

const CODE = "204815";

export default function OtpInputDemo() {
  const field = React.useRef<OtpInputHandle>(null);
  const [status, setStatus] = React.useState<OtpStatus>("idle");

  React.useEffect(() => {
    if (status === "idle") return;
    const back = setTimeout(() => {
      field.current?.clear();
      setStatus("idle");
    }, 1600);
    return () => clearTimeout(back);
  }, [status]);

  return (
    <div className="flex justify-center p-8">
      <OtpInput
        ref={field}
        status={status}
        onComplete={(value) => setStatus(value === CODE ? "success" : "error")}
        hint={`Try ${CODE}, or anything else.`}
        successMessage="Code accepted."
        errorMessage="That code is not right."
      />
    </div>
  );
}