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

Source: Markdown

Source: Python

Plain thousands grouping

The bare thousandSeparator flag groups with commas and nothing else.

9,999

Source: Markdown

Source: Python

A suffix

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

98.6%

Source: Markdown

Source: Python

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

Source: Markdown

Source: Python

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.

Total revenueUp and to the right.

$2,480,000 this quarter.

Source: Markdown

Source: Python

Attributes

Attribute	Valid values	Description
`value`	string or number	The number to format. Rides as a string and is parsed (`"1234.5"` works).
`prefix`	string	Text shown before the number, e.g. `$`.
`suffix`	string	Text shown after the number, e.g. `USD` or `%`.
`thousandSeparator`	bare flag, `false`, or a separator string	A bare flag groups with commas; pass a string (e.g. `' '` or `'.'`) for a custom separator. Omit it, or set `false`, for no grouping.
`decimalScale`	int	Maximum number of decimal places. A deliberate `0` means no decimals.
`decimalSeparator`	string	The character used for the decimal point.
`fixedDecimalScale`	bool (default `false`)	Pad to `decimalScale` with trailing zeros.

Good to know. The number is formatted while the site builds and baked into the page, so it reads correctly with no JavaScript. It rides as island data rather than as text, though, so the page’s Markdown twin and the whole-site PDF leave the figure out — put the number in the surrounding sentence too when those copies have to carry it. decimalScale rounds for display only; pair it with fixedDecimalScale when a column of figures should keep the same number of decimal places.

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

Source: Markdown

Source: Python