Skip to content

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

Free

Numeric Only OTP Input OTP for Vue

A six-digit code field limited to digits, with a note that phones should show the numeric keyboard.

UI library: Ark UI

Six boxes in two groups of three. Under them a line says Numeric keyboard on mobile devices. Letters are not accepted.

Use digits only when the code is numeric. A single Input fits a long key that mixes letters and digits. In Vue, Ark UI fills the boxes when a full code is pasted.

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-2">
  <InputOTP type="numeric">
    <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>
  <p class="text-muted-foreground text-sm">Numeric keyboard on mobile devices.</p>
</div>

FAQ

How is the field limited to digits?

type is numeric, which is also the default.

How does the phone show the number pad?

A numeric field sets inputmode numeric on its inputs.

What happens when a code with spaces is pasted?

Characters that aren't digits are rejected, so paste a clean code. The Paste Optimization example strips everything but the digits before filling the field.

Can phones fill in the code from an SMS?

Yes, when the field has autocomplete one-time-code, which the component sets, iOS and Android offer the code from a recent message.

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.

What is the line under the field?

A paragraph in text-sm text-muted-foreground, Numeric keyboard on mobile devices. It's a note for the demo; in a real form, say where the code was sent.

API Reference

Input OTP

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

All 20 input otp examples