PinInput

N-slot input for OTPs, PINs, and 2FA codes. Numeric or alphanumeric, optional mask, full paste support (paste the whole code anywhere — it spreads across slots), arrow keys + Backspace handled, fires onComplete when filled.

Try the correct code: 123456

Usage

import { PinInput } from '@bwo-ui/react';

<PinInput
  length={6}
  onComplete={(code) => verifyOtp(code)}
  autoFocus
/>

// Alphanumeric, masked
<PinInput length={8} type="alphanumeric" mask />

Props

Prop	Type	Default	Description
`length`	`number`	`6`	Number of slots.
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Uncontrolled default.
`onValueChange`	`(value: string) => void`	—	Fires on every change.
`onComplete`	`(value: string) => void`	—	Fires when the full PIN is filled.
`type`	`'numeric' \| 'alphanumeric'`	`'numeric'`	Accepted character set.
`mask`	`boolean`	`false`	Show characters as bullets (password-style).
`error`	`boolean`	`false`	Show error border.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Slot dimensions.
`autoFocus`	`boolean`	`false`	Focus the first slot on mount.