Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input OTP examples · States

OTP with Success State Input OTP for React

A one-time code field that locks and shows a check once a complete code is verified.

Framework
UI library

Confirmation closes the loop. This example verifies the code half a second after the sixth digit is typed, then disables the field and shows a check with Code verified successfully! in the theme's success color.

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

When is the code verified?

When every slot is filled; a half-second timer stands in for the request. onComplete fires when the code reaches maxLength.

Why is the field disabled afterwards?

So the accepted code can't be changed. disabled comes from the same success state that shows the message.

How is the confirmation shown?

A row in text-success with a CheckIcon and Code verified successfully!, with role status so it's announced.

What if the code changes before it's verified?

Every change resets the success state, so only a complete code shows the confirmation.

What should happen after success?

Usually move on: close the dialog, sign the person in, or continue to the next step, after a short pause so the confirmation is seen.

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