PIN Pad

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/pin-pad

Usage

import { PinPad } from "@/components/ui/pin-pad/pin-pad";
<PinPad />

Examples

Unlock flow

A banking app's return-visit lock.

API reference

Prop Type Default
value* string

Currently entered digits (controlled).

 —
onValueChange* (digits: string) => void —
maxLength 4 | 6

PIN length the lamps represent. Default 4.

 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".

 "scan-face"
error boolean

Wrong code — the lamps flicker red, then the entry empties.

 false
clearOnError boolean

After a wrong code, empty the entry once the red has held. Default true.

 true
disabled boolean

Keys go dim and inert (e.g. while a biometric check runs).

 false
success boolean

Accepted — the lamps resolve into a check and the pad dims.

 false
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.

 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.

 true
showLetters boolean

Show the ABC / DEF letter line under each digit. Default false.

 false
className string —