Scrub Field
Inputs
Source and install need .
pnpm dlx shadcn@latest add @assembli/amount-fieldAmount Field
A money input that formats as you type without moving the caret. Grouping, decimal mark and symbol side follow the locale; decimals stop where the currency does (none for yen). Type 2k or 1.5m, paste "$1,234.56" or "1.234,56 €", nudge with arrow keys, switch currency or pick a preset or Max. Reports minor units for payment APIs and flags amounts out of range.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
value
number | null
The amount in major units (dollars, not cents).
nullwhen empty.defaultValue
number | null
Default
nullonValueChange
(value: number | null, details: { minor: number | null; currency: string }) => …
Gets the amount and the same amount in minor units (cents), ready to send to a payments API.
currency
string
Default
"USD"ISO 4217 code. Decides the symbol, its side and the number of decimals (2 for USD, 0 for JPY).
currencies
string[]
Codes to offer in a switcher at the end of the field.
onCurrencyChange
(currency: string) => void
locale
string
Formatting locale, e.g.
de-DEfor "1.234,50 €". Defaults toen-US.min
number
max
number
step
number
Default
1Arrow keys add or take this much; Shift moves ten times as far. Defaults to 1.
presets
number[]
Quick amounts shown as chips under the field.
maxButton
boolean
Adds a Max button that fills in
max, for transfers and withdrawals.label
React.ReactNode
hint
React.ReactNode
Quiet text to the right of the label, such as "Balance $1,240.00".
description
React.ReactNode
error
React.ReactNode
Replaces the description and the built-in range messages.
size
"md" | "lg"
Default
"md"inputClassName
string
Classes for the input element itself;
classNamegoes on the root.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | – | The amount in major units (dollars, not cents). null when empty. |
| defaultValue | number | null | null | |
| onValueChange | (value: number | null, details: { minor: number | null; currency: string }) => … | – | Gets the amount and the same amount in minor units (cents), ready to send to a payments API. |
| currency | string | "USD" | ISO 4217 code. Decides the symbol, its side and the number of decimals (2 for USD, 0 for JPY). |
| currencies | string[] | – | Codes to offer in a switcher at the end of the field. |
| onCurrencyChange | (currency: string) => void | – | |
| locale | string | – | Formatting locale, e.g. de-DE for "1.234,50 €". Defaults to en-US. |
| min | number | – | |
| max | number | – | |
| step | number | 1 | Arrow keys add or take this much; Shift moves ten times as far. Defaults to 1. |
| presets | number[] | – | Quick amounts shown as chips under the field. |
| maxButton | boolean | – | Adds a Max button that fills in max, for transfers and withdrawals. |
| label | React.ReactNode | – | |
| hint | React.ReactNode | – | Quiet text to the right of the label, such as "Balance $1,240.00". |
| description | React.ReactNode | – | |
| error | React.ReactNode | – | Replaces the description and the built-in range messages. |
| size | "md" | "lg" | "md" | |
| inputClassName | string | – | Classes for the input element itself; className goes on the root. |
