FormWidgets / CurrencyField / Examples

CurrencyField Examples

Live examples of the CurrencyField widget with different currencies, decimal places, and validation settings.

View Documentation

1. Default USD ($)

Default configuration with US dollar symbol and 2 decimal places.

JavaScript
FormWidgets.init('#cf1', 'CurrencyField', {
    symbol: '$',
    decimals: 2
});

2. British Pounds (£)

Sterling symbol with 2 decimal places.

JavaScript
FormWidgets.init('#cf2', 'CurrencyField', {
    symbol: '£',
    decimals: 2
});

3. Euro (€)

Euro symbol with min/max validation (0 to 100,000).

JavaScript
FormWidgets.init('#cf3', 'CurrencyField', {
    symbol: '€',
    decimals: 2,
    min: 0,
    max: 100000
});

4. Japanese Yen (¥) No Decimals

Integer-only currency with decimals: 0.

JavaScript
FormWidgets.init('#cf4', 'CurrencyField', {
    symbol: '¥',
    decimals: 0
});

5. Indian Rupee (₹)

Rupee symbol with a maximum budget of ₹50,000.

JavaScript
FormWidgets.init('#cf5', 'CurrencyField', {
    symbol: '₹',
    decimals: 2,
    min: 0,
    max: 50000
});

6. Multiple Currencies in One Form

Multiple currency fields working independently on the same page.

JavaScript
FormWidgets.init('#cf6a', 'CurrencyField', { symbol: '£', min: 0 });
FormWidgets.init('#cf6b', 'CurrencyField', { symbol: '£', min: 0 });
FormWidgets.init('#cf6c', 'CurrencyField', { symbol: '£', min: 0 });

7. Data Attributes

Configure CurrencyField entirely via HTML data attributes.

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