Skip to content
Devix Open Source
Search products /
devix.pk

Reference

Options and methods

createAmountInput(element, {
  currency: 'AED',
  locale: undefined,
  decimals: undefined,
  value: undefined,
  typing: 'free',
  showCurrency: false,
  grouping: true,
  allowNegative: false,
  accounting: false,
  min: undefined,
  max: undefined,
  postRaw: true,
  rawName: undefined,
  classNames: {},
  onChange: (value, instance) => {},
  onCommit: (value, instance) => {},
});
Option Default
currency — An ISO 4217 code. Sets the decimals and the symbol.
locale the browser's Separators, digit shapes, grouping, and where the currency goes.
decimals from the currency Override it.
value the field's own A decimal string to start from.
typing 'free' 'cents' fills from the right, like a card terminal.
showCurrency false Put the code in the field itself.
grouping true Thousands separators.
allowNegative false Most amount fields are not signed. - toggles the sign.
accounting false Show negatives as (1,234.56).
min, max — Decimal strings. What falls outside is refused as it is typed.
postRaw true Move the field's name onto a hidden input holding the decimal.
rawName the field's name Post the decimal under another name and keep the visible one.
classNames input, negative, empty.
onChange Every change, with the value and the widget.
onCommit Once, when the field is left and the value has settled.

Neither callback fires on mount. A value you passed in is not a change, and a controlled React field whose handler runs during its own construction is how a render loop starts.

The value

const value = total.read();

value.decimal;    // '1234.56'   store this
value.minor;      // '123456'    or this — whole fils
value.number;     // 1234.56     null when empty; not exact above 2^53
value.text;       // 'AED 1,234.56'  what is on the screen
value.empty;      // false
value.negative;   // false

Methods

total.getValue();          // '1234.56'
total.getMinor();          // '123456'
total.getNumber();         // 1234.56 | null
total.setValue('99.50');
total.setCurrency('KWD');  // the decimals change with it
total.destroy();

setCurrency re-reads the amount through the new currency's decimals, so moving from the dirham to the dinar turns 1234.56 into 1234.560 — the same money, with the extra place the dinar has.

destroy() puts the field back exactly as it was: the name returns, the hidden input goes, the classes come off.

The core, without a field

None of it touches the DOM, so it runs on a server — which is how you format a stored amount into a table, an invoice or a PDF:

import { parse, format, toMinor, decimalsFor } from '@devix-labs/amount-input/core';

const amount = parse('1234.56', { currency: 'AED' });

format(amount, { locale: 'en-AE', currency: 'AED', showCurrency: true, pad: true });
// 'AED 1,234.56'
format(amount, { locale: 'ar-EG', pad: true });    // '١٬٢٣٤٫٥٦'
format(amount, { locale: 'en-IN', pad: true });    // '1,234.56' — and 12,34,567.89 when it is bigger

toMinor(amount, { currency: 'AED' });   // '123456'
decimalsFor('KWD');                     // 3

pad is off by default because a live field must not pad under the caret. Turn it on for anything written down.

What it does not do

Arithmetic. Adding lines, applying tax, and rounding an invoice are Devix VAT Calculator, which takes exactly the strings this produces. Keeping the two apart is deliberate: a field that quietly rounds what you typed is a field you cannot trust, and rounding has four modes and two levels that belong to the invoice, not the input.

Updated 15 Sep 2026