KQ-496 · PIN/PAD
Pin Pad
A keypad for codes whose keys pop on flick under the finger or under the matching digit typed on a keyboard, filling a dot on snap. A refused code jumps the row and lets recoil ring it out, then empties the dots one at a time on a cascade; an accepted code seals the row into one bar and stamps the check on recoil. Digits type straight in, Backspace and Delete remove, Escape clears, and arrow keys rove the pad.
KQ-496 · PIN/PAD
Waylight door code
0 of 4 entered
The door code is 2468. Escape clears the row.
Waylight entry locked
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/pin-pad
Props
- length
- 4 | 5 | 6
- default 4
- Code length, and the number of dots in the row.
- onComplete
- (code: string) => Promise<boolean> | boolean
- default —
- Called when every dot is filled; false — or a promise resolving to false — runs the wrong-code sequence.
- label
- string
- default "Passcode"
- Announced group label.
- mask
- boolean
- default true
- Show dots rather than the digits themselves.
| Prop | Type | Default | Description |
|---|---|---|---|
| length | 4 | 5 | 6 | 4 | Code length, and the number of dots in the row. |
| onComplete | (code: string) => Promise<boolean> | boolean | — | Called when every dot is filled; false — or a promise resolving to false — runs the wrong-code sequence. |
| label | string | "Passcode" | Announced group label. |
| mask | boolean | true | Show dots rather than the digits themselves. |