Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input OTP examples · Standard

Controlled OTP Input Input OTP for React

A controlled one-time code field that shows the code as it's typed.

Framework
UI library

Controlling the field gives you the code at every keystroke. This example keeps the value in state and shows it under the field: Enter your one-time password while it's empty, then You entered: followed by the digits so far. Use the same wiring to validate, enable a button or submit.

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 is the value controlled?

The code lives in state and is passed to InputOTP with a change handler that writes every change back. The value is one string, and onChange receives the next string.

How is the code shown under the field?

The value is turned into one string. While it's empty, the line reads Enter your one-time password; otherwise You entered: and the digits.

How do I clear the field from code?

Set the value to an empty string.

How do I know when the code is complete?

Check the length in the change handler, or listen for completion. onComplete fires when the code reaches maxLength.

Do I need to control it?

No. Leave out the value for an uncontrolled field and read it when the form is submitted; control it when the page reacts as people type, as here.

How is the field split?

Each InputOTPGroup joins its slots into one block, and InputOTPSeparator draws a minus between blocks. The separator isn't a character, and index counts straight through the groups, 0 to 5.

All 20 input otp examples