Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA PIN pad with buttons and keyboard digits, dots with a text count, wrong-PIN messages with tries left and a locked state that disables the pad.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for quick-unlock screens, child profiles and kiosks where a short PIN gates a local screen.
Do not use it as account authentication on its own, and do not accept more than a few tries without a server-side lockout.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
verify | (pin: string) => Promise<boolean> | - | Check the PIN. |
onUnlock | () => void | - | Right PIN. |
length | number | 4 | Digits. |
maxAttempts | number | 3 | Wrong tries before the pad locks. |
role="img" and a text count ("2 of 4 digits entered"); the PIN is never rendered as text.maxAttempts the pad disables itself and says so.| Key | Action |
|---|---|
| 0 to 9 | enter a digit |
| Backspace | delete the last digit |
| Escape | clear the entry |
The pattern ships a Testing Library test (pin-lock-screen.test.tsx) that covers progress as text, keyboard digits and editing keys, unlocking and wrong PIN messages with the locked pad.