OTP

One-time password input with individual slot elements. Auto-advances on type, handles Backspace, fires onComplete when all slots are filled. Supports alphanumeric mode.

Features

Auto-advance on type with Backspace support.

onComplete callback when all slots are filled.

Supports alphanumeric mode.

Can be controlled or uncontrolled.

Supports disabled state.

Example

Try 123456

Anatomy


import { OTP } from '@wire-ui/react'
 
<OTP.Root length={6} onComplete={(code) => console.log(code)}>
{Array.from({ length: 6 }).map((_, i) => (
<OTP.Slot key={i} index={i} />
))}
</OTP.Root>

Styling

OTP Slots expose data-active, data-filled, and data-complete. The Root also sets data-complete when all slots are filled.


<OTP.Slot className="
  border border-black bg-white
  data-[active]:ring-4 data-[active]:ring-black/20
  data-[complete]:bg-black data-[complete]:text-white
  data-[disabled]:bg-gray-100 data-[disabled]:opacity-50
" />

Using data attributes

Slots set data-active (focused), data-filled (has value), and data-complete (all slots filled). Root sets data-complete.


/* Active slot glow */
[data-active] { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1); }
 
/* Filled slot */
[data-filled] { border-color: #000; }
 
/* All complete */
[data-complete] { background: #000; color: #fff; }

Root props

Prop	Type	Default	Description
`length`	`number`	required	Total number of slots
`value`	`string`	—	Controlled value
`defaultValue`	`string`	`''`	Initial value for uncontrolled use
`onChange`	`(value: string) => void`	—	Called on every change
`onComplete`	`(value: string) => void`	—	Called when all slots are filled
`disabled`	`boolean`	`false`	Disables all slots
`alphanumeric`	`boolean`	`false`	Allows letters in addition to digits

Slot props

Prop	Type	Description
`index`	`number`	Which slot this element represents (0-based)

Root data attributes

Attribute	When present
`data-complete`	All slots are filled

Keyboard Interactions

Key	Description
`0-9`	Enters a digit and auto-advances to the next slot.
`a-z`	Enters a letter when alphanumeric mode is enabled.
`Backspace`	Clears the current slot and moves focus to the previous slot.
`ArrowLeft`	Moves focus to the previous slot.
`ArrowRight`	Moves focus to the next slot.
`Tab`	Moves focus out of the OTP input.

OTP