# Amount Pad

A money field where each digit drops in and lands, commas slide into place as the number grows, the amount shrinks to fit, and a digit past the limit bounces off in red.

- Page and source: https://uibrik.com/components/amount-pad
- Install: `npx shadcn@latest add https://uibrik.com/r/amount-pad.json`
- Packages (installed by the CLI): motion
- Import: `import { AmountPad } from "@/components/uibrik/amount-pad/amount-pad"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| currency | `string` | `"$"` | Text before the number. |
| decimals | `number` | `2` | Digits allowed after the decimal point. 0 turns the decimal point off. |
| max | `number` | `100000` | Largest amount. A digit past it bounces off and the limit shows. |
| size | `number` | `64` | Font size of the number before it shrinks to fit. |
| value / onChange | `string / (value, amount) => void` |  | Controlled amount as typed, e.g. "1250.5", with its number. |
| defaultValue | `string` | `""` | Amount on mount when uncontrolled. |
| autoFocus | `boolean` | `false` | Focus the field on mount. |
| label | `string` | `"Amount"` | Accessible name. |
| className | `string` |  | Classes for the wrapper. |