Planes

Components

Controls

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.

All components

Try 123456 — or a wrong code for the shake.

Installation

FreeNo license required.
npx shadcn add https://planes.ashishgogula.in/r/otp-input.json
<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.