Components

AmountInput

An amount of money typed in the Provider language and reported in exact minor units, never a float.

Storybook: Storybook
Source: Source

When to use

Wherever an amount of money is asked for: a limit, a fee, a refund amount.

When not to use

For numbers that are not money: Use NumberField for counts and percentages.
To only show an amount: Use MoneyText.

Amounts in minor units

The amount always travels in the smallest unit (cents) as a bigint or an integer string: 123456n means 1.234,56 ₺. A floating-point number is never accepted, so there is no rounding error. The number of fraction digits comes from the currency: 2 for TRY, 0 for JPY.

Anatomy

Amount

Separate the fraction with a decimal point.

import { AmountInput, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <AmountInput label="Amount" description="Separate the fraction with a decimal point." placeholder="0.00" className="max-w-xs" />
    </Provider>
  );
}

Label: Read with the currency name: “Amount (Euro)”.
Box: The amount text and the currency.
Currency: Darkens on focus.
Description and error.

Behaviour

Only digits, commas and points get in while typing (and a minus with allowNegative); a pasted “₺ 1.234,56 TL” keeps its number.
The language’s decimal separator marks the fraction and the other one groups digits. In Turkish, a single point followed by one or two digits (“1234.56”) is read as the decimal.
On leaving the field the amount takes the language format: 1,234.50.
The field shows its own message for too many decimals, min and max; error replaces it.
The form value is the amount in minor units as an integer string (“123450”).

Guidelines

Do not repeat the currency in the label; the box shows it.
State the limits in the description up front.
Use the placeholder only as a format hint.

Content

Key	TR	EN
`ui.amount-input.decimals`	En fazla {digits} ondalık basamak girin.	Enter up to {digits} decimal places.
`ui.amount-input.invalid`	Geçerli bir tutar girin.	Enter a valid amount.
`ui.amount-input.min`	Tutar en az {min} olmalı.	The amount must be at least {min}.
`ui.amount-input.max`	Tutar en fazla {max} olmalı.	The amount must be at most {max}.

MoneyText: Shows an amount.
NumberField: Numbers that are not money.