PinInput
One box per character, for verification codes.
import
import { PinInput } from '@joshicodes/cock';Code
Paste a whole code into any box; it fills from there.
Keyboard
- Backspace
- Clears the current box, or steps back and clears the previous one
- ← →
- Moves between boxes
- Paste
- Fills from the box you pasted into, ignoring anything that does not fit
Behaviour
- The first box carries `autocomplete="one-time-code"`, so the phone offers the code from the SMS.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of PinInput
| Prop | Type | Default |
|---|---|---|
value bindable | string | '' |
length | number | 6 |
type | 'numeric' | 'alphanumeric' | 'numeric' |
mask Hide the characters, like a password field. | boolean | false |
group Put a small gap after this many boxes, e.g. 3 for "123 456". | number | — |
disabled | boolean | false |
invalid | boolean | false |
label Accessible name for the whole group. | string | 'Verification code' |
class | string | — |
Events of PinInput
| Event | Type | Default |
|---|---|---|
oncomplete | (value: string) => void | — |