shadcn.io is not affiliated with official shadcn/ui
PIN Entry Login Block for Ark UI
A wallet app's unlock page: four dots over a keypad of three by four keys on hairline cells, typed digits and Enter, tries counted down and a lock after the third miss.
Installation
Overview
Unlock an app with a four-digit PIN, with this PIN entry login block for React with Ark UI. It's the unlock page of Tillwren, a wallet app: the page's rails run the full height of the screen and one band crosses it, and in the band a centred column holds four dots, a keypad of three by four keys (1 to 9, Clear, 0 and Backspace) drawn as Buttons on hairline cells, and one Shine Button. The dots sit over a real field, so typed digits, Backspace, paste and the keypad all write the same four digits, and Enter unlocks. Until there are four digits the button is quiet and reads "Enter your PIN"; pressing it says what is missing. A wrong PIN rings the dots, clears them and says "Incorrect PIN. 2 tries left"; after the third the keypad switches off until a typed time, with "Forgot PIN?" beside the button and a way to reset the demo. The result replaces the keypad in the same space and takes focus. The demo PIN, 2580, is in the hint, and nothing is checked anywhere else. It's built from Button, Shine Button and Guides, with a CSS entrance only. For wallets, banking, kids' apps and any app that unlocks on a short code.
FAQ
Where is the PIN checked?
Only against the constant PIN in the file; nothing is sent. In a product, check the PIN on your server or against a key in the device's secure storage, never in the page, and enforce the lockout there: a lock that the page keeps is a lock the visitor can reload away. The lock here ends at a typed clock time, "21:40 UTC", and "Reset the demo" brings the tries back so the block can be run again.
How do the keypad and the keyboard share one value?
The four dots are a picture of a real password-type input that is hidden visually but not from assistive technology, named PIN, with a numeric keyboard on phones. Typing or pasting digits fills it, the keypad's keys append to the same state, and while a key has focus a typed digit or Backspace does what the keypad would. Enter in the field submits the form. Tapping the keypad never raises the phone's own keyboard, because the keys don't focus the field.
Does a screen reader hear the digits?
No. The dots are hidden from it, the field is a password field, and the single polite status line speaks counts only: "2 of 4 digits entered", "PIN cleared", "Incorrect PIN. 2 tries left". The keypad's keys are named by their digit, as any dial pad's are, but nothing reads the PIN back.
Why isn't the button disabled until there are four digits?
A disabled button explains nothing and strands the keyboard. This one stays focusable and is only quiet, with a label that names what comes next: pressing it with too few digits says "Enter all 4 digits" and moves focus to the field.