Skip to content

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

Free

Disabled OTP Input Input OTP for Ark UI

A six-digit code field that is disabled, with a note under it that says the OTP input is disabled.

Six boxes in two groups of three, and they do not take input. Under them a line says This OTP input is disabled.

Disable the field when a code must not be entered yet, such as before a message is sent. A Spinner fits while you wait on a request. In React, Ark 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 flex-col gap-2">
  <InputOTP disabled>
    <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>
  <p className="text-muted-foreground text-sm">This OTP input is disabled.</p>
</div>

FAQ

What does disabled do?

The slots can't be focused or edited, they're skipped by Tab, and the whole field is dimmed with opacity-50. A disabled field isn't submitted with its form.

When should I disable the code field?

Until a code has been sent, while a code is being verified, or after it's accepted, as the Success State example does. Say why next to the field so the state isn't confusing.

How do I enable it later?

Pass disabled a boolean from state instead of the bare attribute, and set it to false when the field should accept input.

Can a disabled field show a code?

Yes. Give it a default value and the slots show it, dimmed; the docs page's Disabled demo does that.

What is the line under the field?

A paragraph in text-sm text-muted-foreground, This OTP input is disabled. Replace it with the reason, such as Wait for the code to arrive.

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.

API Reference

Input OTP

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

All 20 input otp examples