Input OTP

Captures one-time passcodes through one accessible native input and a precise segmented display.

@rivetui/input-otp

Preview

Explore each composition interactively, then open its code in the same context.

Verification code

Use one native input behind a precise segmented display. 0 of 6 digits entered.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Alphanumeric

Switch the pattern and input mode when a code contains both letters and digits.

Invalid code

Associate the segmented input with a concise error when server-side verification fails.

This code has expired.

Registry

Installation

Add the component source and its declared dependencies with the shadcn CLI.

Install component

$bunx --bun shadcn@latest add @rivetui/input-otp

Inspect registry item

Public interface

API reference

Component-specific props are listed here. Native element and Base UI props continue to pass through.

InputOTP

Prop	Type	Default
`maxLength`	`number`	`required`
`value`	`string`	`—`
`defaultValue`	`string`	`""`
`onValueChange`	`(value: string) => void`	`—`
`onComplete`	`(value: string) => void`	`—`
`pattern`	`string \| RegExp`	`—`
`inputMode`	`HTMLInputModeAttribute`	`"numeric"`
`autoComplete`	`string`	`"one-time-code"`
`pasteTransformer`	`(pasted: string) => string`	`—`
`disabled`	`boolean`	`false`

InputOTPSlot

Prop	Type	Default
`index`	`number`	`required`