Skip to content

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

Free

SMS Verification Input OTP for Ark UI

A phone check screen for +1 (555) 123-4567, with six boxes, Verify Phone Number, and a 60-second resend wait.

A phone icon sits above Verify your phone and +1 (555) 123-4567. Six boxes follow, then Verify Phone Number, and a line that starts at Resend code in 60s.

Use it after you text a code. A Number Input is the wrong stand-in: it is for a quantity, not a code. In React, Ark UI moves to the next box as you type.

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 items-center gap-2 text-center">
    <div className="flex size-12 items-center justify-center rounded-full bg-primary/10">
      <SmartphoneIcon aria-hidden="true" className="size-6 text-primary" />
    </div>
    <h2 className="font-semibold text-2xl">Verify your phone</h2>
    <p className="text-muted-foreground text-sm">
      We sent a code to{" "}
      <span className="font-medium">+1 (555) 123-4567</span>
    </p>
  </div>
  <form className="flex flex-col gap-6" onSubmit={handleSubmit}>
    <Field invalid={error !== ""}>
      <FieldLabel className="sr-only">Verification code</FieldLabel>
      <div className="flex justify-center">
        <InputOTP onValueChange={handleValueChange} value={value}>
          <InputOTPGroup>
            <InputOTPSlot className="bg-background" index={0} />
            <InputOTPSlot className="bg-background" index={1} />
            <InputOTPSlot className="bg-background" index={2} />
          </InputOTPGroup>
          <InputOTPSeparator />
          <InputOTPGroup>
            <InputOTPSlot className="bg-background" index={3} />
            <InputOTPSlot className="bg-background" index={4} />
            <InputOTPSlot className="bg-background" index={5} />
          </InputOTPGroup>
        </InputOTP>
      </div>
      <FieldError className="text-center">{error}</FieldError>
    </Field>
{/* The rest of the file is under Installation. */}

FAQ

How does the resend countdown work?

The seconds left live in state, starting at 60. An effect lowers them once a second and stops at zero, when the text is replaced by Didn’t receive a code? and the Resend code link.

What does Resend code do?

It restarts the countdown, clears the field and any error, and shows Verification code resent. Call your API there.

What happens when the code is too short?

Submitting shows Verification code must be 6 characters. in FieldError; a full code shows Phone number verified successfully!. 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 header built?

A SmartphoneIcon in a size-12 circle with bg-primary/10, the heading Verify your phone, and the number in font-medium.

Can the phone fill in the code?

Yes. The field has autocomplete one-time-code, so iOS and Android offer the code from the message.

How is the code field named?

A FieldLabel with sr-only reads Verification code. Field links FieldLabel to the code field inside it, so there is no id to match.

API Reference

Field

Sets invalid={error !== ""}. The rest is on the Field page.

Input OTP

Sets onValueChange={handleValueChange}, value={value}, index={0}, index={1}, index={2} and index={3}. The rest is on the Input OTP page.

Button

Sets type="submit", onClick={handleResend}, type="button" and variant="link". The rest is on the Button page.

All 20 input otp examples