Components

OTP Input

Free

A one-time-code input with rolling digit entry, an animated caret, error shake, and a success pop. Paste-friendly and accessible.

Try 123456 — or a wrong code for the shake.

Installation

FreeNo license required.
npx shadcn add https://useplanes.com/r/otp-input.json
// controlled — server-side verification
const [code, setCode] = useState("");
const [status, setStatus] = useState<OtpStatus>("idle");

<OtpInput
  length={6}
  value={code}
  onChange={(next) => {
    setCode(next);
    setStatus("idle");
  }}
  status={status}
  disabled={status === "success"}
  onComplete={async (value) => {
    const ok = await verify(value);
    setStatus(ok ? "success" : "error");
  }}
/>

// uncontrolled — local demo validation
<OtpInput length={6} correctCode="123456" onComplete={(code) => verify(code)} />

Use cases

  • Two-factor auth

    SMS / authenticator code entry with paste support and one-time-code autofill.

  • Email verification

    Signup confirmation codes with built-in success and error feedback.

  • Payment confirmation

    Bank-grade 3DS code prompts that feel trustworthy.

  • Device pairing

    Short pairing codes for TV or IoT login flows.