Money Input

A currency field that reads and writes integer minor units. Money that has been through a float has already lost — the value that leaves this control is a whole number of cents.

src/components/ui/money-input.tsx

About

From the component's own source, where it was written.

"US dollars" rather than "USD", falling back to the code where unsupported.

Install

npx astralyx-ui add money-input

Usage

import { MoneyInput } from '@/components/ui/money-input'

<MoneyInput value={cents} onValueChange={setCents} currency="USD" />

Composer

Change the props and the source below follows.

Props

currency

size

variant

errordisabled

tsx

<MoneyInput
  value={cents}
  onValueChange={setCents}
  currency="USD"
  size="md"
/>

Examples

Round-tripping minor units

tsx

const [value, setValue] = useState(2450)

<MoneyInput value={value} onValueChange={setValue} currency="EUR" locale="de-DE" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`MoneyInput`

Prop	Type	Default	Description
value	number	—	Minor units. `250` is $2.50, never `2.5`.
defaultValue	number	—	Minor units. `250` is $2.50, never `2.5`.
onValueChange	(minorUnits: number) => void	—	Fires with the integer value, or `undefined` when the field is cleared — which is not the same as zero.
currency	string	'USD'	ISO 4217. Drives the symbol, its side, and the number of decimal places — JPY has none.
locale	string	'en-GB'	Grouping and decimal separators. A German user typing `1.234,56` means 1234.56.
size	keyof typeof fieldSize	'md'	—
variant	'default' \| 'secondary' \| 'ghost'	'default'	—
error	boolean	false	—
min	number	—	Minor units, clamped on blur rather than while typing, so you can still delete a digit.
max	number	—	Minor units, clamped on blur rather than while typing, so you can still delete a digit.