Money input

An amount in integer minor units (cents) and a currency, typed the way the locale writes it, never as a float.

Web · ✓Mobile · ✗ to buildDesktop · ✓BetaForms

import { MoneyInput, parseMinorUnits, formatMinorUnits } from "@krizaka/ui/money-input";

PriceCAD

3900 cents

Web only — React, from @krizaka/ui/money-input. Beta: its API may still change in a minor version.

Mobile · ✗ to build. The native twins of PromoCodeField, MoneyInput and CopyButton are a follow-up of the coupons surfaces. issue #782

Why it is here. The coupons (@krizaka/coupons) and the plans' prices: a Canadian-dollar amount typed in a field, kept as integer cents, for the founder offer and the owner's own prices (krizaka-ui#576, #783).

When to use

For a price, a discount or a budget the app stores as cents.
When the person may pick the currency among a short list.

When not to use

For a plain number (a quantity).Use instead: Field

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { MoneyInput, parseMinorUnits, formatMinorUnits } from "@krizaka/ui/money-input";

Examples

Fixed currency

3900 cents in en-CA.

PriceCAD

3900 cents

Chosen currency

fr-CA, four currencies; JPY drops the decimals.

Montant

Props

An amount field in minor units. The caller holds an integer; the person sees their locale's decimal.

Prop	Type	Default	Description
`currency`required	`string`	—	ISO 4217 code: `"CAD"`.
`locale`required	`string`	—	BCP 47 locale for the separators: `"fr-CA"`, `"en-CA"`.
`onValueChange`required	`(minorUnits: number \| null) => void`	—	Called with the new amount in minor units, or `null` when the field is emptied.
`value`required	`number \| null`	—	The amount in minor units (cents), an integer, or `null` when empty.
`currencies`	`readonly string[]`	—	The currencies to choose among (ISO codes). Omitted: the currency is fixed.
`currencyLabel`	`string`	—	The currency select's accessible name, passed translated: "Currency".
`invalid`	`boolean`	—	Marks the amount invalid (pair it with a `Field.Error`).
`onCurrencyChange`	`((currency: string) => void)`	—	Called with the chosen currency (required with `currencies`).

Accessibility

A text input with a decimal keypad on phones.
The currency select needs currencyLabel as its accessible name.
On blur the amount is rewritten grouped and padded (“1 299,00”).

Keyboard

Keys	Action
`Type`	Digits and the locale's decimal mark; more decimals than the currency has are refused.

Best practices

Hold the integer in your state; the field formats it by locale (fr-CA writes “12,50”).
Pair it with Field.Label and Field.Error.
A currency without decimals (JPY) accepts none; one with three (BHD) accepts three.

Generated from the code of @krizaka/ui 3.67.1: its meta.ts, its examples and its types.Edit this documentation on GitHub