Input OTP

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

Enter the 6-digit verification code sent to your device.

Installation

npx shadcn@latest add @iconiq/input-otp

Props

OTP

10 props

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

Defaultfalse

Disables interaction across every slot.

classNamestring

Classes merged onto the root flex container.

containerClassNamestring

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

reducedMotionboolean

Force reduced motion for slot animations. Defaults to the user OS preference.

Notes

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

3 props

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.

Notes

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

2 props

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>`.

Notes

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

1 prop

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

classNamestring

Classes merged onto the group flex container.

OTPSeparator

1 prop

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

classNamestring

Classes merged onto the separator element.