PIN Keypad Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. The Approve button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same PinFields component and share the block's state, so digits keyed in the copy are there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

There is one string of up to four digits in the block's state. A key press appends to it, Backspace removes the last digit, Clear empties it, and typing or pasting into the slots replaces it, with anything that isn't a digit dropped. When the fourth digit lands the PIN is checked at once. There is no submit button on purpose: a keypad PIN is finished by its last digit, and Cancel stays for the way out.

They are masked on every target and never read out: the line under the slots, which a screen reader announces when it appears, speaks counts only ("Wrong PIN. 2 tries left.") and never a digit. The slots are drawn by the input library, so the block draws a dot for each digit itself and hides the characters; the field behind them is a password input. The masking is a courtesy on a screen anyone might look at, and the demo PIN is printed in the hint on purpose.

Nothing is sent or checked anywhere. The right PIN, 2468, only turns the page's transfer row into "Sent to Tove Haldane: approved with PIN (demo)", and the header's button becomes Review again. In your app send the PIN to your server in settle, let the server count the tries and lock the account (the three here are only a demo), and move money only on its answer.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the first slot so digits can be typed at once, and Escape, Cancel and the close button return focus to the Approve button. The keypad is a group named Keypad of real buttons, each at least 48 px, and Backspace has a name for a screen reader. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. When the keys lock, focus moves to Cancel.

The copy shown on load docks to the foot of the page as a bottom sheet, with Cancel pinned under a body that scrolls. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen, and the keypad fills its width. The nudge is dropped under reduced motion, and the line says the same thing.