Components

Money Input

Amounts in any currency and locale, with shorthand like 1.5L or 10k and sums like 120+45.50, exact to the paisa, and typed in other currencies, converted at your rates. Built on Input Group.

Value: 15200000 paise (₹1,52,000.00)

Import

import { MoneyInput, MoneyCurrencyMenu, MoneyConversionHint } from '@rinzai/zen';

Examples

Dollars

Any currency and locale; allowEmpty makes an empty field mean null.

Convert

Pick another currency from the symbol and type in it: it's converted into rupees at the loaded rate, and the original is kept.

Saved: ₹32,740.00

Compact

compact: shorter and right-aligned, for editing inside table rows.

API reference

<MoneyInput>

Amount input in one currency. Shows grouped digits for the locale (1,52,000 for en-IN) and accepts shorthand: 1.5L, 2cr, 10k, 1.2m, and sums: 120+45.50, 3*12.99. Commits on blur or Enter; Escape reverts. Values are integer minor units (paise, cents), or null when empty.

With convert, the symbol becomes a currency switch: type an amount in e.g. USD and it's converted at the rates you load (in the browser; the amount is never sent anywhere). Replace the symbol with start, or build your own field from useMoneyInput, MoneyCurrencyMenu and MoneyConversionHint.

Prop	Type	Default
`currency`Required ISO 4217 code, e.g. "INR", "USD".	`string`	`—`
`allowEmpty`	`boolean`	`—`
`allowNegative`	`boolean`	`—`
`compact` Smaller still and right-aligned, for editing inside table rows.	`boolean`	`false`
`convert` Let people type in another currency, converted at the rates you load.	`CurrencyConversion`	`—`
`defaultValue` The first amount, when the field keeps its own.	`number \| null`	`—`
`end` Content after the input, e.g. a unit or a clear button.	`ReactNode`	`—`
`live` For forms: report the amount (converted, when typed in another currency) on every keystroke instead of on blur, so a Save button can never miss it. Invalid text reports null.	`boolean`	`—`
`locale` Decides digit grouping and the symbol, e.g. "en-IN" (1,52,000) or "en-US" (152,000). Defaults to the LocaleProvider's.	`string`	`—`
`onCancel` Called on Escape, after reverting.	`(() => void)`	`—`
`onValueChange`	`((value: number \| null) => void)`	`—`
`size` Height, matching Button's: sm (32px), default (40px) or lg (44px).	`"default" \| "lg" \| "sm"`	`—`
`start` Replaces the currency symbol (or the currency switch), e.g. with your own.	`ReactNode`	`—`
`value` Amount in minor units (paise, cents), or null when empty, when you keep it.	`number \| null`	`—`

<MoneyCurrencyMenu>

The currency switch for a converting field (convert): shows the symbol, or the code of the foreign currency being typed in, and opens a menu of your currency and the ones with a rate. Put it in an InputGroup's start slot.

Prop	Type	Default
`money`Required	`{ inputProps: { readonly type: "text"; readonly inputMode: "decimal"; readonly autoComplete: "off"; readonly spellCheck: false; readonly value: string; readonly 'aria-invalid': true \| undefined; ... 4 more ...; readonly onKeyDown: (e: KeyboardEvent<...>) => void; }; ... 10 more ...; conversion: { ...; } \| null; }`	`—`
`className`	`string`	`—`

<MoneyConversionHint>

The line under a converting field: getting the rate, the rate and what the typed amount comes to, or what the last amount was converted from.

Prop	Type	Default
`money`Required	`{ inputProps: { readonly type: "text"; readonly inputMode: "decimal"; readonly autoComplete: "off"; readonly spellCheck: false; readonly value: string; readonly 'aria-invalid': true \| undefined; ... 4 more ...; readonly onKeyDown: (e: KeyboardEvent<...>) => void; }; ... 10 more ...; conversion: { ...; } \| null; }`	`—`
`className`	`string`	`—`