Number formatter

Number Formatter is mostly arithmetic, so format/2 is a pure function and the node is a Text around its result. You can call the function anywhere you want a string, such as a chart axis, a slider readout or an accessibility label.

Number Formatter keeps no state and sends no events. Pass the number as value, or call format/2 yourself.

format/2 accepts a number, a numeric string or nil. A string is parsed as a number, and a string that does not parse comes back as it is. nil gives an empty string.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob number_formatter

The generator registers the <NumberFormatter> tag so you can use it in ~MOB markup. It needs no sibling component and no shared helper module. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaNumberFormatter>. Without a prefix the tag is <NumberFormatter>.

Grouping, decimals, prefix and suffix are one pure function. This call groups the integer part, fixes two decimals and adds a dollar prefix.

Format a number with a prefix and decimals

LTR RTL

Preview

Show the whole example Show less

MishkaNumberFormatter.format(1234567.5, decimals: 2, prefix: "$")
#=> "$1,234,567.50"

The screenshot renders the same function through three tags, which the next section shows. Grouping applies to the integer part only, and a negative number keeps its sign outside the grouping.

Write the formatter as a tag when you want a Text node in your markup. The first line renders $1,234,567.50 in semibold weight. The second swaps both separators and adds a suffix to render 1.234,50 €. The third renders -98,765 in the error color.

<MishkaNumberFormatter value={1_234_567.5} decimals={2} prefix="$" font_weight={:semibold} />
<MishkaNumberFormatter
  value={1_234.5}
  decimals={2}
  thousand_separator="."
  decimal_separator=","
  suffix=" €"
/>
<MishkaNumberFormatter value={-98_765} text_color={:error} />

Each row is a call to MishkaNumberFormatter.format/2 and the string it returns.

Swap the two separators for European conventions, as the fourth row shows.

Set the weight with font_weight. Both bridges read it for typography. A bare weight is a layout weight on a Row or Column, so passing it here styles nothing.

• Headless Number Formatter, the web component this one ports.
• Mob JSON Input, a multiline JSON field with an error state.
• Mob Rolling Number, a number that counts up to its value.
• Mob Number Field, a numeric input with decrement and increment buttons.
• Mob components, the full list of native components.