Overview

Currency Input is used for handling currency input with automatic formatting, validation, and customization. It supports decimal precision, and prefix/suffix styling. It ensures smooth user interaction, managing edge cases like negative values and thousands separators, making it ideal for applications requiring accurate currency input.

Documentation

Typical usage scenario

Currency Input lets users type money amounts with live formatting (currency symbol, thousand separators and a fixed number of decimals) instead of into a plain text box.

Problems it solves: unformatted amount entry, local separator and symbol conventions, and controlling decimals and negative amounts without custom JavaScript on every page.

Useful for: invoices, orders, payments, expenses, pricing, and any data view form that captures an amount.

Demo: https://currencyinput-sandbox.mxapps.io/index.html?profile=Responsive

Features and limitations

Features:

- Live currency formatting as the user types

- Prefix and suffix (for example €, $ or " USD")

- Custom decimal and group separators, or no group separators at all

- Decimal control: allow or block decimals, limit how many can be typed, and pad to a fixed scale on blur

- Allow or block negative amounts

- Optional shorthand entry: 1k, 2m or 3b expands to the full number, and you can turn this off

- Placeholder, disabled state, maximum length, and an arrow-key step

- Every option is bound to an attribute, so one page can serve several currencies

- Web widget that also works offline; version 1.0.1 is built for Studio Pro 10.24.17

Limitations:

- Web only, so it doesn't work on native mobile

- It must be placed inside a data view

- The Value attribute must be a String; the widget isn't a Decimal attribute editor

- It formats only and doesn't convert currencies

- Formatting follows the options you configure, not the browser locale

- It comes with basic CSS only

Dependencies

- Mendix Studio Pro 10.24.17 (widget 1.0.1)

Installation

1. Open your app in Studio Pro 10.24.17.

2. Download Currency Input from the Marketplace, or copy mendix.CurrencyInput.mpk (release 1.0.1) into your app's widgets folder.

3. Choose App > Synchronize App Directory. If you're replacing an older build, right-click existing instances and choose Update widget.

4. Find Currency Input in the Toolbox.

5. Run the app locally and test it on a page.

Configuration

1. Add a String attribute for the amount, plus optional Boolean, String or Integer attributes for the options you want to control per record.

2. Put a data view on the page and drop Currency Input inside it.

3. Map Value to the String attribute, and map the options you need:

- Formatting: prefix, suffix, decimalSeparator, groupSeparator, disableGroupSeparators

- Decimals: allowDecimals, decimalsLimit, decimalScale, fixedDecimalLength

- Input rules: allowNegativeValue, disableAbbreviations, maxLength, step, placeholder, disabled

- Start value: defaultValue (String, Integer, Decimal or Long)

4. When the field loses focus, and only if the amount changed, the widget writes a plain number string such as 1234.56 to Value, without the symbol or separators.

5. In your save microflow, convert and validate it, for example with parseDecimal($Order/AmountText).

Known bugs

None

Report issues at https://github.com/bharathidas/CurrencyInput/issues

Frequently Asked Questions

- Which Mendix version do I need?

Studio Pro 10.24.17 uses widget 1.0.1, and 9.24.22 uses release 1.0.0.

- Can I bind Value to a Decimal attribute?

No. Use a String attribute and convert it with parseDecimal in a microflow.

- What is stored in the attribute?

A plain number string such as 1234.56, without the symbol or thousand separators.

- When is the value saved?

When the field loses focus, and only if the amount changed.

- Does it work on native mobile?

No, it's web only.

- How do I show euros?

Set the prefix to "€ ", decimalSeparator to "," and groupSeparator to ".".

- How do I stop 1k turning into 1000?

Set disableAbbreviations to true.

- How do I always show two decimals?

Set decimalScale to 2. The amount is padded when the field loses focus.