NumberFormatter

The built-in numberformatter tag — format a number with thousands separators, fixed decimals, and a currency-style prefix/suffix. Usage, options, and live examples.

A built-in tag that formats a number for display — thousands separators, a fixed number of decimals, a custom decimal separator, and a currency-style prefix or suffix. It renders inline text, so it drops straight into a sentence. Give it a value plus any of the formatting options; omit an option to take its default.

Use it as {% numberformatter value='1234' %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'numberformatter', …).

Currency with thousands grouping

A prefix, comma grouping (the bare thousandSeparator flag), and two fixed decimal places.

$1,234,567.89

Plain thousands grouping

The bare thousandSeparator flag groups with commas and nothing else.

9,999

A suffix

suffix appends text after the number — here a percent sign.

98.6%

A custom separator (European style)

Pass a string to thousandSeparator for a custom group separator and set decimalSeparator for the decimal point — here a space groups and a comma is the decimal point, padded to two places.

1 234 567,50

With other components

Because it renders inline text, a formatted number drops into any other component’s body — here inside a card subtitle composed in Python.

Attributes

CSS Selectors

Target the rendered element through its island marker — [data-aardvark-island="NumberFormatter"] — it renders a plain <span> carrying the formatted value:

/* Every rendered NumberFormatter carries this island marker */
[data-aardvark-island="NumberFormatter"] { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert:

$1,234,567.89