Amount Keypad

Pro

Money keypad where each key glows under your finger and keys it can’t accept flicker once. Pairs with an amount display that lights up each new digit. Types decimals or fills cents from the right.

Preview

Installation

npx @lumioui/cli add pro/amount-keypad

Usage

import { amountToNumber, applyAmountKey, AmountKeypad, AmountFigure } from "@/components/ui/amount-keypad/amount-keypad";
<AmountKeypad />

Also exported: amountToNumber, applyAmountKey, AmountFigure.

Examples

Split

Splitting a café brunch bill with a friend.

Terminal

A market-stall card reader in cents-entry mode: every digit shifts in from the right (1 → $0.01, 125 → $1.25), so the stallholder never types a decimal; keys glow orange under the finger.

Top up

Adding money to a current account.

API reference

AmountKeypad

Prop Type Default
value string

Controlled value — a decimal string ("", "12", "12.5").

 —
defaultValue string

Uncontrolled initial value. Default "".

 ""
onValueChange (value: string) => void

Fires with the next string after every accepted key.

 —
onKeyPress (key: AmountKey) => void

Fires for every key tap, accepted or not.

 —
onReject (key: AmountKey, value: string) => void

Fires when a key is refused — shake the amount display from here.

 —
maxDecimals number

Digits allowed after the separator. 0 hides the decimal key. Default 2.

 2
maxValue number

Largest numeric value accepted.

 —
maxIntegerDigits number

Digits allowed before the separator. Default 7.

 7
entry "decimal" | "cents"

"decimal" types left to right; "cents" shifts in from the right (terminal idiom). Default "decimal".

 "decimal"
decimalSeparator "." | ","

Glyph shown on the decimal key — "." or "," for locales that use a comma. Default ".".

 "."
leftKey React.ReactNode

Rendered in the decimal slot when the decimal key is unavailable (whole numbers / cents entry).

 —
variant "plain" | "filled"

"plain" — bare digits with a highlight disc on press; "filled" — secondary tiles. Default "plain".

 "plain"
size "md" | "lg"

Key height: md 56 / lg 64. Default "md".

 "md"
disabled boolean

Dims and disables every key.

 false
haptics boolean

Per-key haptics. Default true.

 true
className string —

AmountFigure

Prop Type Default
value* string

Characters to show, already formatted ("1,250.5"). Empty shows the placeholder.

 —
prefix string

Currency or sign before the digits ("$", "£").

 ""
suffix string

Unit after the digits.

 ""
placeholder string

Shown dim while the value is empty. Default "0".

 "0"
flicker number

Bump to flicker the last digit once (a refused key).

 0
className string

Container classes.

 —
textClassName string

Classes for every character. Default a 48pt semibold tabular figure.

 "text-5xl font-semibold tracki…