/

Number KIT

Description and examples API Helpers
Use maskitoNumberOptionsGenerator to create a mask for entering a formatted number.

High precision

#

Use maximumFractionDigits parameter to configure the number of digits after decimal separator.

Separators

#

Use decimalSeparator and thousandSeparator to get mask with locale specific representation of numbers.

In Germany people use comma as decimal separator and dot for thousands

Postfix

#

Use postfix parameter to set non-removable text after the number.
Additionally you can use maskitoCaretGuard to clamp caret inside allowable range.
This example also shows how to restrict the greatest permitted value via max parameter.

Decimal zero padding

#

Use minimumFractionDigits to always show trailing zeroes.

Non removable dollar sign is achieved by using prefix parameter.

Minus sign

#

Use minusSign parameter to configure the character which indicates that a number is negative.

In this example hyphen is used as minusSign

Minus before prefix

#

Use negativePattern property to configure order of prefix and minus sign (by default, prefix is always placed before minus).

Dynamic decimal zero padding

#

You can change options on the fly to build complex logic.
This example shows how to initially disable decimal zero padding and enable it only after user inserts decimal separator.

Thousand separator pattern

#

Use thousandSeparatorPattern to customize digit grouping. Provide a function that receives raw integer digits as a string and returns them split into groups, left-to-right.

This example implements 4-digit grouping for Japanese yen — the traditional (10 000) counting system: ¥1,2345,6789.

Japanese numbering groups digits in sets of 4 from right: ¥1,2345,6789

Thousand separator pattern uses Intl.NumberFormat

#

Use Intl.NumberFormat.formatToParts to derive the grouping from a browser locale automatically. Pass the result to thousandSeparatorPattern parameter.

Indian numbering system groups digits as 2+3 from right: 12,34,567