Currency input

Description

The currency input component converts the digits entered by users into the input field into a currency formatted value. E.g.: the user inputs 12345.67. The input updates the value to be £12,345.67

Data attributes:

  • [data-js-currency]: This is the selector which is looped through to initiate the component via Javascript.
  • [data-js-currency-min]: A numeric value that represents the minimum allowed value. If the user inputs anything below this value, the input gets the is-invalid class applied.
  • [data-js-currency-max]: A numeric value that represents the maximum allowed value. If the user inputs anything above this value, the input gets the is-invalid class applied.
  • [data-js-currency-locale]: input language. Default is "en-us". Accepted values are "en-gb", "nl-nl", "de".
  • [data-js-currency-format]: a Regex to set the currency format. Default is $0,0[.]00. To set a custom one, $ represents the locale currency, , represents the thousands separator, . represents the decimal places separator. For a full list of formats, check NumeralJS.

Import JS functionality

In order to have the JS functionality of this component available, you need to include it in your project. Assuming the project is using ES6:

import currency-input from 'radius/dist/m2dm/js/currency-input';
inputCurrency();

Usage

Usage example

Code example

<form>
  <input
    type="tel"
    data-js-currency
    data-js-currency-min="20000.12"
    data-js-currency-max="50000.42"
    data-js-currency-locale="en-gb"
    data-js-currency-format="$0,0[.]00"
  />
</form>