Input OTP

Animated one-time password field with spring slot focus, character entrance, and a blinking caret.

Installation

npx shadcn@latest add @iconiq/input-otp

Props

OTP

Root wrapper around Base UI OTP Field that owns the shared value, completion state, and keyboard/paste behavior for every slot.

lengthnumber

Required

Number of OTP characters. Required so Base UI can clamp values, detect completion, and manage focus order.

valuestring

Controlled OTP string. Pair with `onValueChange` when the parent owns the code.

defaultValuestring

Initial value for uncontrolled usage.

onValueChange(value: string, eventDetails) => void

Called whenever the OTP value changes from typing, paste, backspace, or keyboard navigation.

onValueComplete(value: string, eventDetails) => void

Called when all slots are filled, including when a complete code is pasted.

validationType"numeric" | "alpha" | "alphanumeric" | "none"

Default "numeric"

Built-in validation applied before values are stored. Use `alphanumeric` for backup or recovery codes.

disabledboolean

Default false

Disables interaction across every slot.

classNamestring

Classes merged onto the root flex container.

containerClassNamestring

Legacy alias merged onto the root container alongside `className`.

Built on `OTPFieldPreview` from `@base-ui/react/otp-field`.

Prefer `OTPSlots` so slot count always matches `length`, or render one `OTPSlot` per character manually.

Supports `autoSubmit`, `mask`, `normalizeValue`, and `onValueInvalid` from the underlying Base UI root.

OTPSlots

Convenience layout that renders the correct number of slots from the parent `OTP` length, with an optional separator.

separatorAfternumber

Inserts `OTPSeparator` before the slot at this zero-based index, such as `3` for a 3-3 grouped code.

slotClassNamestring

Classes forwarded to every rendered `OTPSlot`.

classNamestring

Classes merged onto the internal `OTPGroup` wrapper.

Must be rendered inside `OTP` so it can read the configured `length`.

Adds `aria-label` to every slot after the first one for screen reader context.

OTPSlot

Animated character cell with spring focus ring, pop-in digit motion, and a pulsing caret on the active empty slot.

classNamestring

Classes merged onto the animated slot surface.

aria-labelstring

Accessible label for slots after the first one. The first slot inherits the field label from `OTP` or a surrounding `<label>`.

The real input is visually hidden but remains focusable for typing, paste, and mobile one-time-code autofill.

Slot order is determined by render order; the legacy `index` prop is accepted but ignored.

OTPGroup

Optional layout wrapper that groups slots with consistent spacing when you need multiple visual clusters.

classNamestring

Classes merged onto the group flex container.

OTPSeparator

Accessible separator between OTP groups, rendered with the dotted divider used in the Iconiq preview.

classNamestring

Classes merged onto the separator element.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @base-ui/react/otp-field, motion.

This page documents the Base UI OTP Field preview install only.

The generated registry file is /r/input-otp.json.