CurrencyField - Form Widgets Documentation

Usage

HTML (Auto-init)

HTML

<input type="text" class="fw-currency" id="price">

<script>
  FormWidgets.autoInit();
</script>

HTML with Data Attributes

HTML

<input type="text" class="fw-currency"
       data-symbol="&pound;"
       data-decimals="2"
       data-min="0"
       data-max="10000">

JavaScript Initialization

JavaScript

FormWidgets.init('#price', 'CurrencyField', {
    symbol: '&pound;',
    decimals: 2,
    min: 0,
    max: 10000
});

Options

Option	Type	Default	Description
symbol	string	'$'	Currency symbol prepended to the value. Use HTML entities for special characters (e.g. `£`, `€`, `¥`).
decimals	number	2	Number of decimal places. Use `0` for integer-only currencies (e.g. Japanese Yen).
min	number	null	Minimum allowed value. Values below this will show a validation error.
max	number	null	Maximum allowed value. Values above this will show a validation error.
icon	string	'dollar'	Name of the SVG icon to use from the internal icon set.
required	boolean	false	Marks the field as required.

Data Attributes

Data Attribute	Equivalent Option	Example
data-symbol	`symbol`	`data-symbol="£"`
data-decimals	`decimals`	`data-decimals="2"`
data-min	`min`	`data-min="0"`
data-max	`max`	`data-max="10000"`
data-icon	`icon`	`data-icon="dollar"`
data-required	`required`	`data-required="true"`

Getting Values

JavaScript

// Get the formatted display value (includes symbol)
const currencyWidget = FormWidgets.instances.get(document.getElementById('price'));

// Parse the raw numeric value
const rawValue = currencyWidget.getValue();
// e.g. 1250.00

// The displayed value in the input is already formatted
const displayValue = currencyWidget.element.value;
// e.g. '1,250.00'

Features

Any Currency

Set any symbol: £, €, $, ¥, & ₹ and more.

Decimal Control

Configure 0, 2, or any number of decimal places.

Min/Max Validation

Enforce value bounds with real-time feedback.

Auto-formatting

Formats value with thousand separators and decimals on blur.