Decimal formatting

The integer part grows freely by default. The fraction is optional and unlimited until decimalPlaces is set. Use text inputs with inputmode="decimal".

bindDecimal(input)

bindDecimal(input, { decimalPlaces: 2, prefix: '$' })

bindDecimal(input, { decimalPlaces: 2, separator: '.', decimalSeparator: ',', prefix: 'R$ ' })

bindDecimal(input, { decimalPlaces: 2, separator: '.', decimalSeparator: ',', suffix: ' \u20AC' })

bindDecimal(input, { decimalPlaces: 0, suffix: ' units' })

bindDecimal(input, { decimalPlaces: 2, prefix: '$', allowNegative: true })

bindDecimal(input, { decimalPlaces: 2, segmented: false })

bindDecimal(input, { numberPlaces: 2, decimalPlaces: 2 })

bindDecimal(input, { suffix: ' kg', onChange: (masked, numeric) => updateOutputs(masked, numeric) })

Set decimalPlaces: 2 for fixed, zero-padded currency decimals, or 0 for integers only. numberPlaces pads and caps the integer part. Here segmented controls thousands grouping; it does not mean independent pattern fields.

Prefixes and suffixes are fixed display text, excluded from numeric parsing even when they contain digits or a decimal separator. Typing inside a prefix inserts at the start of the number; typing inside a suffix inserts at the end. Use the same locale and affix options when formatting and parsing.

Formatting without an input#

Use the pure helpers for initial values, server-rendered output, and programmatic updates. Pass the same options to formatting and parsing.

import { bindDecimal, formatDecimalValue, unmaskDecimal } from 'mother-mask'

const options = {
  decimalPlaces: 2,
  separator: '.',
  decimalSeparator: ',',
  suffix: ' \u20AC',
}

input.value = formatDecimalValue(1234.5, options) // '1.234,50 \u20AC'
bindDecimal(input, {
  ...options,
  onChange: (value, numericValue) => console.log(value, numericValue),
})
unmaskDecimal('1.234,50 \u20AC', options) // 1234.5