Balance Logo
Reckon Design System

Currency Field

An input to allow users to enter an amount of currency.
pnpm add @reckon-web/currency-field
Import usage
import {
} from '@reckon-web/currency-field';
  • Code
  • API

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>


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.

Open in Playroom


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.



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.

Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo