fetaUI
GitHub

OTP Form

A one time code card. Verify waits for all six digits, and a wrong code keeps them to fix.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/otp-form
Playground

Verify your login

Enter the code we sent to m@example.com

Enter the 6 digit code

Lost access to this email?

Without help

Verify your login

Enter the code we sent to your email

Enter the 6 digit code

Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/otp-form

Accessibility

  • Status is a live region.
  • A code pastes into the field like any text, with no clipboard permission.

Motion

  • Verify shows its loader while checking.
  • Messages swap with a blur.
  • The countdown keeps running with reduced motion, because it is status.

Responsive behavior

  • 400 px on Web and full width on Mobile.

Performance

  • The resend timer runs only during the wait.
  • A ref stops state updates once the card is gone mid check.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import OTPForm from @/components/fetaui/otp-form. It composes InputOTP and Button.
  • onVerify must resolve true or false. A rejection counts as false. The demo passes any code but all zeros.
  • The code is fixed at six digits and verifies on the last digit.
  • Rate limit attempts on your server. The card does not limit tries.
/docs/components/otp-form/markdown
PreviousInput OTP
NextPadlock

Related

Input OTPComponentSeparate slots that behave like one input. Typing moves forward, paste fills every slot.OTP LockProBlockA padlock over a code field. It opens when the code is right.OTP VaultProBlockA code picked from a turning sphere of digits, or dialled on tumbler wheels.PadlockComponentA gunmetal padlock whose shackle lifts as a code is checked and pops free when it is right.