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 · ✗ à construireBureau · ✓BêtaFormulaires

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

PriceCAD

3900 cents

Web uniquement — React, depuis @krizaka/ui/money-input. Bêta : son API peut encore changer à une version mineure.

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

Pourquoi il est là. 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).

Quand l’utiliser

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

Quand ne pas l’utiliser

For a plain number (a quantity).À la place : Field

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	Description
`currency`requis	`string`	—	ISO 4217 code: `"CAD"`.
`locale`requis	`string`	—	BCP 47 locale for the separators: `"fr-CA"`, `"en-CA"`.
`onValueChange`requis	`(minorUnits: number \| null) => void`	—	Called with the new amount in minor units, or `null` when the field is emptied.
`value`requis	`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`).

Accessibilité

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”).

Clavier

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

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 3.67.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub