KQ-603 · AMOUNT/PAD

Amount Pad

A keypad for money whose figure is the instrument. A pressed key sinks on flick, and each new character slides into the figure from its right on snap, keyed by role so only the typed digit mounts. The decimal point draws a rule under the cents and holds their width; a press that would pass the limit is refused rather than clamped, jumping the figure so recoil can ring it back.

KQ-603 · AMOUNT/PAD

To Basinworks Exchange

Daily limit $500.00 · resets at midnight

Amount $0.00 · limit $500.00

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/amount-pad

Props

value / defaultValue: number; default 0; Controlled or initial amount in major units.
onValueChange: (value: number) => void; default —; Fires from the key press or keystroke that changed the amount.
limit: number; default —; Ceiling; a press that would pass it is refused and shakes the figure. Omit for no ceiling.
onLimitReached: (attempted: number) => void; default —; Fires from the refused press, with the amount that was attempted.
format: (value: number, fractionDigits: number) => string; default —; Prints the figure; fractionDigits is how many cents digits have been typed, so the field is not padded to .00 before the payer gets there. Defaults to an en-US Intl.NumberFormat.
label: string; default "Amount"; Names the pad and the readout.
caption: React.ReactNode; default —; A quiet line under the figure — what the money is for. Falls back to the limit.

Prop	Type	Default	Description
value / defaultValue	number	0	Controlled or initial amount in major units.
onValueChange	(value: number) => void	—	Fires from the key press or keystroke that changed the amount.
limit	number	—	Ceiling; a press that would pass it is refused and shakes the figure. Omit for no ceiling.
onLimitReached	(attempted: number) => void	—	Fires from the refused press, with the amount that was attempted.
format	(value: number, fractionDigits: number) => string	—	Prints the figure; fractionDigits is how many cents digits have been typed, so the field is not padded to .00 before the payer gets there. Defaults to an en-US Intl.NumberFormat.
label	string	"Amount"	Names the pad and the readout.
caption	React.ReactNode	—	A quiet line under the figure — what the money is for. Falls back to the limit.