Components

Money Input

Amounts in any currency and locale, with shorthand like 1.5L or 10k, exact to the paisa. Built on Input Group.

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

Import

import { MoneyInput } from '@rinzai/zen';

Examples

Dollars

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

Currency menu

Build your own field from useMoneyInput: here a currency switcher in the start slot.

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. Commits on blur or Enter; Escape reverts. Values are integer minor units (paise, cents), or null when empty. Replace the symbol with `start` (e.g. a currency switcher), or build your own field from useMoneyInput.

Prop	Type	Default
`currency`Required ISO 4217 code, e.g. "INR", "USD".	`string`	`—`
`locale`Required Decides digit grouping and the symbol, e.g. "en-IN" (1,52,000) or "en-US" (152,000).	`string`	`—`
`onChange`Required	`(value: number \| null) => void`	`—`
`value`Required Amount in minor units (paise, cents), or null when empty.	`number \| null`	`—`
`allowEmpty`	`boolean`	`—`
`allowNegative`	`boolean`	`—`
`aria-label`	`string`	`—`
`autoFocus`	`boolean`	`—`
`className`	`string`	`—`
`compact` Smaller, for editing inside table rows.	`boolean`	`false`
`disabled`	`boolean`	`false`
`end` Content after the input, e.g. a unit or a clear button.	`ReactNode`	`—`
`id`	`string`	`—`
`live` For forms: report the amount on every keystroke instead of on blur, so a Save button can never miss it. Invalid text reports null.	`boolean`	`—`
`onCancel` Called on Escape, after reverting.	`(() => void)`	`—`
`start` Replaces the currency symbol, e.g. with a currency switcher.	`ReactNode`	`—`