Skip to content

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

Free

Different Length OTP Variants Input OTP for Vue

Three code fields on one page: four digits in a row, six digits in two groups, and eight digits in two groups.

UI library: Ark UI

Three labeled fields stack on the page. 4-Digit OTP is four boxes. 6-Digit OTP is two groups of three. 8-Digit OTP is two groups of four.

Match the length to the code you send. A single Input is easier when the length is not fixed. 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

<div class="flex flex-col gap-6">
  <Field>
    <FieldLabel>4-Digit OTP</FieldLabel>
    <InputOTP>
      <InputOTPGroup>
        <InputOTPSlot class="bg-background" :index="0" />
        <InputOTPSlot class="bg-background" :index="1" />
        <InputOTPSlot class="bg-background" :index="2" />
        <InputOTPSlot class="bg-background" :index="3" />
      </InputOTPGroup>
    </InputOTP>
  </Field>
  <Field>
    <FieldLabel>6-Digit OTP</FieldLabel>
    <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>
  </Field>
  <Field>
    <FieldLabel>8-Digit OTP</FieldLabel>
    <InputOTP>
<!-- The rest of the file is under Installation. -->

FAQ

How is each length set?

The number of InputOTPSlot parts sets the length.

How should I group each length?

Short codes read best in one block. Split longer ones in the middle, as here: three and three for six digits, four and four for eight, with an InputOTPSeparator between the groups.

How do the indexes work in the eight-digit field?

They count through the whole code, 0 to 7: 0 to 3 in the first group and 4 to 7 in the second.

How is each field labeled?

Each sits in its own Field with a FieldLabel: 4-Digit OTP, 6-Digit OTP and 8-Digit OTP. Field links each label to its code field.

Which length should I use?

Four digits for short-lived PINs, six for SMS and email codes, and longer ones for backup or recovery codes that are typed rarely and need more strength.

Do the fields stretch?

No. Each is as wide as its slots, so the eight-digit field is the widest. The fields are stacked with gap-6.

API Reference

Field

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

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