Components/Money Input

Money Input

ATM-style currency field: digits flow in from the right, so the amount is always well-formed. State is an integer in minor units (cents) - never floats - and the mask is rendered by Intl.NumberFormat, so any currency/locale pair works.

State in minor units: 123456 (= R$ 1.234,56)

USD · en-US

EUR · de-DE

JPY · ja-JP (0 decimals)

Installation

npx @ajax-ui/cli add money-input

Props

value / defaultValue - integer amount in minor units (R$ 12,34 = 1234). Set value + onValueChange for controlled.
onValueChange(cents) - fires with the new integer amount on every keystroke.
currency - ISO 4217 code (default "BRL"). Zero-decimal currencies like JPY are handled automatically.
locale - BCP 47 locale for the mask (default "pt-BR").
max - cap in minor units; keystrokes beyond it are ignored.

Why minor units

Floats cannot represent most decimal fractions exactly (0.1 + 0.2 !== 0.3), which is unacceptable for money. Every Ajax UI finance component shares the same contract: amounts travel as integers in the currency's smallest unit, and floating point only appears at the display boundary inside Intl.NumberFormat. Pair this input with the helpers in @ajax-ui/react/format.

Accessibility

Renders a native <input inputMode="numeric"> - mobile keyboards open the digit pad.
No cursor traps: typing appends, Backspace removes the last digit, and the caret never needs repositioning.
Pass aria-label or pair with a <label> as with any input.