# Amount Keypad

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.

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

## Install

```bash
npx @lumioui/cli add pro/amount-keypad
```

## Import

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

## Variants

- `split` — Split: `npx @lumioui/cli add pro/amount-keypad-split`
- `terminal` — Terminal: `npx @lumioui/cli add pro/amount-keypad-terminal`
- `top-up` — Top up: `npx @lumioui/cli add pro/amount-keypad-top-up`

## Props

### AmountKeypad

| Prop | Type | Notes |
| --- | --- | --- |
| `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. |
| `maxValue?` | `number` | Largest numeric value accepted. |
| `maxIntegerDigits?` | `number` | Digits allowed before the separator. Default 7. |
| `entry?` | `"decimal" | "cents"` | "decimal" types left to right; "cents" shifts in from the right (terminal idiom). Default "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". |
| `size?` | `"md" | "lg"` | Key height: md 56 / lg 64. Default "md". |
| `disabled?` | `boolean` | Dims and disables every key. |
| `haptics?` | `boolean` | Per-key haptics. Default true. |
| `className?` | `string` | — |

### AmountFigure

| Prop | Type | Notes |
| --- | --- | --- |
| `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". |
| `flicker?` | `number` | Bump to flicker the last digit once (a refused key). |
| `className?` | `string` | Container classes. |
| `textClassName?` | `string` | Classes for every character. Default a 48pt semibold tabular figure. |

## Icons rendered

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

Source: https://lumioui.com/components/amount-keypad