Input OTP · paneui

Installation

pnpm dlx shadcn@latest add @paneui/input-otp

Usage

import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp"

<InputOTP length={6}>
  <InputOTPGroup>
    <InputOTPSlot />
    <InputOTPSlot />
    <InputOTPSlot />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot />
    <InputOTPSlot />
    <InputOTPSlot />
  </InputOTPGroup>
</InputOTP>

Composition

InputOTP
├── InputOTPGroup
│   └── InputOTPSlot × n
└── InputOTPSeparator

Examples

Four Digits

Use for a PIN that should stay hidden.

Accessibility

Label the first slot with the field label and give the rest aria-labels such as "Character 2 of 6". Pasting fills every slot; autoComplete is one-time-code so phones offer the code from a message.

API Reference

Built on the OTP Field primitive. Only the props this library adds or changes are listed; everything else passes through.

InputOTP

Also accepts every prop of OTPField.Root.

length*: number; Number of slots.
size= "default": "xs" | "sm" | "default" | "lg"; Slot size (24 / 28 / 32 / 36px). Inside a sized Field it follows the field.
onValueComplete: (value: string) => void; Called when every slot is filled.

Prop	Type	Default	Description
length*	number	—	Number of slots.
size	"xs" \| "sm" \| "default" \| "lg"	"default"	Slot size (24 / 28 / 32 / 36px). Inside a sized `Field` it follows the field.
onValueComplete	(value: string) => void	—	Called when every slot is filled.

InputOTPSlot

Also accepts every prop of OTPField.Input.

data-filled: Present when the slot holds a character.

Data attribute	Description
data-filled	Present when the slot holds a character.

InputOTPGroup

Also accepts every prop of div.

InputOTPSeparator

Also accepts every prop of div.