Skip to content

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

Free

OTP Code Dialog for React

A verify-email dialog with six code slots, a Resend link, and Verify kept off until every digit is filled.

Enter Code opens Verify your email. The description says a 6-digit code was sent. Six slots sit under Verification code, with Resend under them. Verify stays off until all six digits are in.

Use it to collect a code without leaving the page. Resend does nothing until you wire it. Account details beside the code fit a Sheet. In React, Base UI does not check 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

Dialog anatomy: content, title, description, close, footer

Usage

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
    Enter Code
  </DialogTrigger>
  <DialogContent className="sm:max-w-md">
    <DialogHeader>
      <DialogTitle>Verify your email</DialogTitle>
      <DialogDescription>
        We&apos;ve sent a 6-digit code to your email address. Please enter
        it below.
      </DialogDescription>
    </DialogHeader>
    <Field>
      <FieldLabel htmlFor="otp-code-field">Verification code</FieldLabel>
      <div className="flex justify-center">
        <InputOTP
          id="otp-code-field"
          maxLength={6}
          onChange={setValue}
          value={value}
        >
          <InputOTPGroup>
            <InputOTPSlot index={0} />
            <InputOTPSlot index={1} />
            <InputOTPSlot index={2} />
            <InputOTPSlot index={3} />
            <InputOTPSlot index={4} />
            <InputOTPSlot index={5} />
          </InputOTPGroup>
        </InputOTP>
      </div>
{/* The rest of the file is under Installation. */}

FAQ

Should it submit on the sixth digit?

Only if verification is instant and errors are rare. Otherwise enable Verify at six digits, as here, and let Enter submit.

Can people paste the code?

Yes. Pasting a code fills the slots at once, so people can copy it from an email or a text message.

How is the value read?

The field is controlled, and Verify checks that all six digits are there. The value is a string, from onChange, with maxLength of 6.

Should Resend have a cooldown?

Yes: disable it for 30 to 60 seconds after a send and show the countdown. Resend is a link-style Button here; wire it to your request.

How do I handle an expired code?

Your server decides. Show the error in the field and offer to resend, and keep the dialog open.

Should the digits be masked?

No. Codes are short-lived, and people need to check what they typed.

API Reference

Dialog

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

Button

Sets variant="outline", variant="link" and disabled={!complete}. The rest is on the Button page.

Field

Sets htmlFor="otp-code-field". The rest is on the Field page.

Input OTP

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

All 17 dialog examples