MoneyInput

A currency amount field with live digit grouping, a currency menu, quick-add chips and minor-unit output.

When to use

• Rents, budgets, prices and cheque sizes, such as a MyRoomie listing's monthly rent.
• When you store amounts as integers in minor units (cents, yen) and want formatting handled for you.
• Not for unitless numbers or design values; use ScrubInput or Input.

Usage

import { MoneyInput } from "@/components/iris/money-input/money-input";

const [cents, setCents] = useState(42000);
h(MoneyInput, {
  label: "Monthly rent",
  name: "rent",
  value: cents, // minor units; null is empty
  onValueChange: setCents,
  defaultCurrency: "EUR",
  currencies: ["EUR"], // one code hides the menu
  min: 100,
  max: 100000,
  quickAdd: [5, 10, 20], // major units
});

Props

Prop	Type	Default	Description
label	string	required	Visible label.
hideLabel	boolean	false	Label for screen readers only.
value / defaultValue	number | null	– / null	Amount in minor units.
onValueChange	(value, details) => void	–	Minor units plus { currency, major, formatted } details.
currency / defaultCurrency	string	– / first of currencies	Controlled or initial ISO 4217 code.
onCurrencyChange	(currency) => void	–	Fires on a menu pick; the amount carries over.
currencies	string[]	USD, EUR, GBP, JPY, CAD, AUD, CHF, INR	Codes in the menu; one code hides it. Without currency or defaultCurrency, the first code is selected.
min	number	–	Lowest amount (minor units), checked on blur.
max	number	–	Highest amount (minor units); typing past it is refused with a nudge.
quickAdd	number[]	[10, 50, 100]	Major-unit chips; [] hides them.
step	number	one major unit	Arrow-key step in minor units; Shift moves ten times.
locale	string	"en-US"	Formatting locale, fixed so server and client agree.
description / error	string	–	Hint, or a message that replaces the built-in range text.
disabled / name / id / className / onBlur	–	–	Standard field props; name adds a hidden minor-unit input.

Notes

• Keyboard: ArrowUp/Down step, Shift or PageUp/PageDown for ten steps; Enter completes the fraction (12.5 to 12.50); the currency menu supports arrows, Home/End, type-to-jump and Escape.
• The input is a spinbutton with a full currency value text; animated digits are hidden from assistive technology so readers and autofill get plain text.
• Long amounts scale down to keep the field width stable.
• Reduced motion removes the rolling digits, shakes and springs.
• --money-input-height (default 76px) sets the shell height; the menu opens 8px below it. Styled with the theme's surface, line-strong, ink, red (error) and orange (range flash), rounded-panel (shell) and rounded-button (currency button and quick-add chips).