Pin Input
An OTP/PIN entry island with individual character boxes. Supports paste from clipboard, auto-advances to the next box on input, and steps back on Backspace when the current box is empty.
Default
import { PinInput } from '@davaux/ui'
<PinInput />Length
<PinInput length={4} />
<PinInput length={6} />
<PinInput length={8} />Numeric only
<PinInput type="number" length={6} />Masked (password style)
<PinInput mask length={4} />Disabled
<PinInput disabled length={4} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 4 | Number of input boxes |
type | 'alphanumeric'|'number' | 'alphanumeric' | Character type constraint |
mask | boolean | — | Renders each character as a password dot |
placeholder | string | '○' | Placeholder shown in each empty box |
disabled | boolean | — | Prevents interaction |
name | string | — | Form field name for the hidden combined value |