Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Transaction Confirmation Input OTP for React

A payment check for $1,250.00 to John Doe, with a security alert, six boxes, Cancel, and Confirm Transaction.

The heading is Confirm Transaction, with a line about sending $1,250.00 to John Doe. A Security Check alert sits above six boxes, then Cancel and Confirm Transaction.

Ask for the code before money moves. If the step should block the rest of the app, put it in a Dialog. In React, Base UI does not verify the code.

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

Anatomy

Input OTP anatomy: root, group, separator, slot

Usage

<div className="flex w-full max-w-sm flex-col gap-6">
  <div className="flex flex-col gap-2 text-center">
    <h2 className="font-semibold text-2xl">Confirm Transaction</h2>
    <p className="text-muted-foreground text-sm">
      You’re about to send $1,250.00 to John Doe
    </p>
  </div>
  <Alert>
    <TriangleAlertIcon aria-hidden="true" />
    <AlertTitle>Security Check</AlertTitle>
    <AlertDescription>
      For your security, please enter the confirmation code sent to your
      registered email address.
    </AlertDescription>
  </Alert>
  <form className="flex flex-col gap-6" onSubmit={handleSubmit}>
    <Field invalid={error !== ""}>
      <FieldLabel className="sr-only" htmlFor="transaction-code">
        Confirmation code
      </FieldLabel>
      <div className="flex justify-center">
        <InputOTP
          id="transaction-code"
          maxLength={6}
          onChange={handleValueChange}
          value={value}
        >
          <InputOTPGroup>
            <InputOTPSlot className="bg-background" index={0} />
            <InputOTPSlot className="bg-background" index={1} />
            <InputOTPSlot className="bg-background" index={2} />
{/* The rest of the file is under Installation. */}

FAQ

How is the security notice built?

An Alert with a TriangleAlertIcon, an AlertTitle reading Security Check and an AlertDescription that says where the code was sent.

How are the two buttons laid out?

In a row with gap-2, each flex-1 so they share the width: an outline Cancel of type button and a Confirm Transaction submit button.

What does Confirm Transaction do?

With a full code, it disables itself and reads Confirming... while a timer stands in for the request, then reports success. A short code shows Confirmation code must be 6 characters. in FieldError.

What does Cancel do?

It clears the code and any error and reports Transaction cancelled. In your app, close the dialog or go back.

Where do the results appear?

The example shows the result in a status line under the form instead of calling an API. Replace that with your request, and show its error in FieldError when the code is rejected.

How is the code field named?

A FieldLabel with sr-only reads Confirmation code. FieldLabel sets htmlFor to transaction-code, the id on InputOTP, which it passes to its input.

API Reference

Alert

No extra props in this demo. The rest is on the Alert page.

Field

Sets invalid={error !== ""} and htmlFor="transaction-code". The rest is on the Field page.

Input OTP

Sets id="transaction-code", maxLength={6}, onChange={handleValueChange}, value={value}, index={0} and index={1}. The rest is on the Input OTP page.

Button

Sets onClick={handleCancel}, type="button", variant="outline", disabled={isConfirming} and type="submit". The rest is on the Button page.

All 20 input otp examples