Form
PinInput
Fixed-length OTP / verification code field. Auto-advance on input, backspace clears + moves back, paste fills all slots.
Examples
6-digit OTP
Value: (empty)
<PinInput
bind:value={otp}
length={6}
onComplete={(code) => alert(code)}
/>Masked, alphanumeric
<PinInput length={4} pattern="alphanumeric" mask />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | '' | Bindable string of entered characters. |
length | number | 6 | Number of slots to render. |
pattern | 'numeric' | 'alphanumeric' | 'numeric' | Allowed character class. |
mask | boolean | false | Use type=password to mask each slot. |
autoFocus | boolean | false | Focus the first slot on mount. |
onComplete | (code: string) => void | — | Fires when all slots are filled. |
Install
CLI
npx @a3tai/mittsu add pin-input