The
CurrencyField
component has been deprecated and will be removed in a future version. Use Field and CurrencyInput instead.
- <CurrencyField- label="Field label"- onChange={handleInputChange}- value={inputValue}- />+ <Field label="Field label">+ <CurrencyInput+ onChange={handleInputChange}+ value={inputValue}+ />+ </Field>
Usage
The CurrencyInput
is similar to the TextInput
with a couple of small differences. The type of the value is string | number
so it can be a string or a number. We represent a valid value as a number and everything else as a string. This makes it easy to pass the value to other systems that accept a float but means that we can still represent invalid values as strings so that validation errors can be shown when the value can't be represented as a number. We'll also format the value of the input using Intl.NumberFormat
when the input is blurred.
maximumFractionDigits
You can customise the maximum number of digits after the decimal place between 2
(the default) and 4
. The naming is based on the option that Intl.NumberFormat
accepts.
showAdornment
You may choose to hide the dollar symbol adornment.
Usage with @reckon-web/forms
To use it with @reckon-web/forms
, you can use field.currency
and validate.currency
.