# PIN Pad

Numeric PIN keypad with a row of dots that light up as you type. A wrong code flickers and clears, the right one turns into a check, with a face or fingerprint key and a lockout timer.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/pin-pad
```

## Import

```tsx
import { PinPad } from "@/components/ui/pin-pad/pin-pad";
```

## Variants

- `unlock` — Unlock flow: `npx @lumioui/cli add pro/pin-pad-unlock`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string` | Currently entered digits (controlled). |
| `onValueChange` | `(digits: string) => void` | — |
| `maxLength?` | `4 | 6` | PIN length the lamps represent. Default 4. |
| `onComplete?` | `(pin: string) => void` | Fires the moment the last digit lands. |
| `onBiometric?` | `() => void` | Shows the bottom-left biometric key. |
| `biometricIcon?` | `IconName` | Biometric key icon — "scan-face" (default) or "fingerprint". |
| `error?` | `boolean` | Wrong code — the lamps flicker red, then the entry empties. |
| `clearOnError?` | `boolean` | After a wrong code, empty the entry once the red has held. Default true. |
| `disabled?` | `boolean` | Keys go dim and inert (e.g. while a biometric check runs). |
| `success?` | `boolean` | Accepted — the lamps resolve into a check and the pad dims. |
| `onSuccessSettled?` | `() => void` | Fires once the check has drawn and held. |
| `maxAttempts?` | `number` | Wrong codes allowed before a lockout. Off when omitted. |
| `lockoutSeconds?` | `number` | Lockout length in seconds. Default 30. |
| `onLockoutChange?` | `(locked: boolean) => void` | Fires when a lockout starts (true) and ends (false). |
| `hardwareKeyboard?` | `boolean` | Take digits from a physical keyboard on the web. Default true. |
| `showLetters?` | `boolean` | Show the ABC / DEF letter line under each digit. Default false. |
| `className?` | `string` | — |

## Icons rendered

- `lock` — /icons.html?i=lock
- `delete` — /icons.html?i=delete

Source: https://lumioui.com/components/pin-pad