Skip to content

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

Free

OTP with Enhanced Focus Management Input OTP for Solid

A six-digit code field with a note that says a click anywhere on the input focuses it so you can type.

UI library: Ark UI

Six boxes in two groups of three. Under them a line says Click anywhere on the input to focus and type. The visible page has no other label.

Use the wide click target when the boxes are small and easy to miss. A normal Input is easier to hit when the code is one string. In Solid, Ark UI moves to the next box as you type.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Input OTP anatomy: root, group, separator, slot

Usage

<div class="flex flex-col gap-4">
      <Label class="w-fit cursor-text">
        <span class="sr-only">One-time password</span>
        <InputOTP onValueChange={handleValueChange} value={value()}>
          <InputOTPGroup>
            <InputOTPSlot class="bg-background" index={0} />
            <InputOTPSlot class="bg-background" index={1} />
            <InputOTPSlot class="bg-background" index={2} />
          </InputOTPGroup>
          <InputOTPSeparator />
          <InputOTPGroup>
            <InputOTPSlot class="bg-background" index={3} />
            <InputOTPSlot class="bg-background" index={4} />
            <InputOTPSlot class="bg-background" index={5} />
          </InputOTPGroup>
        </InputOTP>
      </Label>
      <p class="text-muted-foreground text-sm">
        Click anywhere on the input to focus and type.
      </p>
    </div>

FAQ

How does a click anywhere focus the field?

A label sends a click on itself to the first field inside it. Wrapping InputOTP in Label makes the whole area, gaps included, a click target for the code.

How is the field named for screen readers?

A span with sr-only inside the label reads One-time password, which becomes the field's accessible name.

Why the text cursor?

cursor-text on the label shows that the area takes typing, not a button press.

What happens when I click a box directly?

Each slot is its own input, so a click focuses that slot. The label only adds the gaps around them.

Does the keyboard work as usual?

Yes. Tab reaches the field, and the arrow keys and Backspace move between slots. The label adds a pointer target, not another tab stop.

How is the value kept?

In state, written on every change. The value is an array of strings, one per slot, and each change arrives as details.value.

API Reference

Label

No extra props in this demo. The rest is on the Label 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.

All 20 input otp examples