## PIN Lock (S—192)

A lock screen PIN pad: dots fill as you tap, a wrong code shakes and counts tries, three misses lock it for a while.

- URL: https://sundaeui.dev/components/pin-lock
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/pin-lock.json`
- Tags: security, pin, keypad, passcode, unlock, lock-screen

Tap the keys or type on a keyboard. Each digit fills a dot; at full length the code is checked. A wrong code shakes the dots, clears them and shows the tries left.
After the last try the pad locks with a live countdown, then unlocks itself. A correct code shows a calm confirmation.

### Usage

```tsx
import { PinLock } from '@/components/sundae/pin-lock'

<PinLock />
```

### Props

- `length` (`number`, default `4`): Digits in the PIN.
- `onSubmit` (`(pin: string) => boolean | Promise<boolean>`, required): Check the code; return true to unlock.
- `tries` (`number`, default `3`): Attempts before lockout.
- `lockSeconds` (`number`, default `30`): Lockout duration.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Unlocking an app, confirming a payment, parental gates.

### When not to use

- Account sign-in on the web: use a password or passkey.

### Accessibility

- The dots are a status with the count of digits entered, never the digits themselves.
- Keys are real buttons; digits and Backspace work from a keyboard.
- Errors and the lockout countdown are announced politely.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- 0–9: Enter a digit
- Backspace: Delete the last digit