AmountInput

AmountInput serves for entering amounts of money. It consists of a text input and a currency label.

Loading demo…

Formatting

AmountInput parses and formats the entered value on blur. This behaviour depends on the chosen thousand separator (separating groups of numbers), decimal separator and precision.

Country	Formatted value	Thousand separator	Decimal separator	Default precision
AT, SK	10.000,00	dot	comma	2
CZ, RO, HR	10 000,00	space	comma	2
HU	10 000	space	comma	0

To improve the UX when user types or pastes values with incorrect or incomplete separators AmountInput will correct them.

AmountInput supports dot, the “international” decimal separator when possible. If the entered value contains only one dot or a comma and the number of digits after it is not higher than the precision, then the separator is interpreted as a decimal separator. Try it out by entering 123.45 in the demos below.

Missing separators and decimal digits will be automatically filled in.

Loading demo…

HINT: The value input by user can be processed before AmountInput reacts to it. This can effectively disable entry of some characters. See TextInput processValue example. Be careful about removing . or , characters, because mobile users might have access only to one of them on their keyboards.

Rules For Developers

Use allowNegative to allow negative values
The parsing logic for both decimal separators might lead to confusion when used in precision above two digits. If this causes issues for you, it is possible to circumvent it with useSeparatorsOnly prop.
It is possible to hide decimals without changing the precision by setting showDecimals to false

Value

To get the AmountInput value you can handle the onFormat callback. It is called with two parameters.

jsx<AmountInput onFormat={(formattedString, amount) => {…}} />

The first parameter is the actual string formatted according to the formatting rules. The second one is an amount object structured like this.

json{
  "value": "12050",
  "precision": 2,
  "currency": "EUR"
}

Please note that the value in the amount object is a string representing an integer of the smallest monetary unit. In other words, in the example above it denotes the value in eurocents. So that amount object describes an amount of €120,50.

To set AmountInput’s value, use the value prop. It accepts either a Number or a String, but String is prefered since Number might overflow. Again, the value is in both cases represented as an amount of cents (or their counterparts in various currencies).

HINT See a working example of a controlled AmountInput in Playroom.

Currency label

The currency label can either show a euro Icon or an ISO currency code, optionally along with a Flag.

HINT For non-React documentation of currency labels, please check out static input addons.

Loading demo…