Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input OTP examples · Behavior

OTP with Resend Flow Input OTP for React

A one-time code field with a 60-second countdown before the code can be sent again.

Framework
UI library

Codes get lost, but a resend button that can be hammered invites abuse. This example counts down from 60 seconds under the field, keeps the Resend Code link disabled until it reaches zero, and then offers it with Didn’t receive the code?. Resending clears the field and restarts the countdown.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the countdown work?

The seconds left live in state, starting at 60. An effect schedules a one-second timer that lowers it by one and clears the timer on cleanup, so it stops at zero and never leaks.

When can people resend?

Only at zero. Until then the link-style Button is disabled and the text reads Resend code in 42s; at zero it reads Didn’t receive the code? and the button works.

What does Resend Code do?

It clears the code and restarts the countdown. Call your API there to send a new code.

How is the resend button styled?

variant link, size sm, and h-auto p-0 so it sits on the text line. It's type button, so it never submits a form.

Is the countdown enough to prevent abuse?

No. It guides honest users; the server should limit how often a code can be sent.

How is the value kept?

In state, written on every change. The value is one string, and onChange receives the next string.

All 20 input otp examples