## Amount Keypad (S—090)

A pay-style keypad: digits push into a big formatted amount, backspace pops them, the display shakes at the cap.

- URL: https://sundaeui.dev/components/amount-keypad
- Category: Forms & inputs · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/amount-keypad.json`
- Tags: amount, payment, money, send, keypad, numpad

Each digit drops into the amount from below and the thousands separators reflow live. Backspace removes the last digit, and long-pressing it clears everything.
Typing past the max shakes the amount. Physical number keys and Backspace work too.

### Usage

```tsx
import { AmountKeypad } from '@/components/sundae/amount-keypad'

<AmountKeypad />
```

### Props

- `value / defaultValue` (`string`): Amount as a digit string in cents.
- `max` (`number`, default `1000000`): Max amount in cents.
- `currency` (`string`, default `'$'`): Currency symbol.
- `onValueChange` (`(cents: number) => void`): Called on change.
- `onSubmit` (`(cents: number) => void`): Called by the action button.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Send money, tip, top-up and split-bill screens on mobile.

### When not to use

- Desktop forms: a normal input with formatting is faster.

### Accessibility

- The amount is an output with aria-live; each key is a labelled button.
- Digits, Backspace and Enter on a physical keyboard work while the keypad has focus.
- Reduced motion removes the movement and keeps every state change.