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.

Preview

Open Sandbox

Anatomy


import { OTP } from '@wire-ui/react'
 
<OTP.Root length={6} onComplete={(code) => console.log(code)}>
  <OTP.Slot index={0} />
  <OTP.Slot index={1} />
  <OTP.Slot index={2} />
  <OTP.Separator />
  <OTP.Slot index={3} />
  <OTP.Slot index={4} />
  <OTP.Slot index={5} />
</OTP.Root>

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