Skip to content

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

Free

Standard OTP Input Input OTP for Vue

A six-digit one-time code field split into two groups of three, with a separator between the groups.

UI library: Ark UI

Six boxes in two groups of three, with a separator between them. Nothing else is on the page: no label, no button, and no message.

Use this shape when the code arrives as two groups, like 123-456. A single Input is simpler when people paste one long string. In Vue, 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

<InputOTP>
  <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>

FAQ

How are the two groups made?

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.

What sets the number of digits?

The number of InputOTPSlot parts sets the length.

How does focus move between the boxes?

Typing a character fills the current box and moves to the next; Backspace clears and moves back, and the arrow keys move between boxes. Pasting a full code fills them all at once.

Does it accept letters?

No. The default type is numeric, so only digits are accepted; set type to alphanumeric for letters too.

Why do the slots have bg-background?

So the boxes stay solid on a muted or tinted surface, such as a card or the preview. Drop the class when the field sits on the page background.

How do I read the code?

Pass a value and a change handler, as the Controlled example does, or read it from the form when it's submitted. The value is an array of strings, one per slot, and each change arrives as details.value.

API Reference

Input OTP

Sets index="0", index="1", index="2", index="3", index="4" and index="5". The rest is on the Input OTP page.

All 20 input otp examples