/// Data Display

NumberFormatter

A thin Intl.NumberFormat wrapper for decimals, currency, percent, and units, in mono tabular figures.

import { NumberFormatter } from "@protocore/pds";

View as Markdown

Styles

style selects the Intl formatter: "decimal" (default, with grouping), "currency" (pair with currency), "percent", or "unit" (pair with unit). Figures render mono and tabular so columns line up.

1,234,567€1,299.5042.8%42 km

Compact notation

notation="compact" renders 1200000 as 1.2M — for dense dashboards and stat tiles where the exact figure lives in a tooltip.

1.2K1.2M3.4B

When to use it

NumberFormatter is the general-purpose number renderer: counts, ratios, measurements, quantities. It forwards its props straight to Intl.NumberFormat with an explicit default locale ("en") so a server render and its hydration are byte-identical.

For money specifically, reach for MoneyAmount — it adds minor-unit awareness and sign coloring on top of the same Intl core. A non-finite input renders the literal value with a data-invalid marker rather than a fabricated number.

Usage

Pass a raw number (or numeric string) and let Intl format it.
Set `currency` with `style="currency"`, `unit` with `style="unit"`.
Use `notation="compact"` for stat tiles and dense dashboards.
Keep a fixed `locale` so SSR and client agree.

Don't

Pre-format the number into a string; that can't localize or align.
Use it for money with minor-units — reach for MoneyAmount.
Rely on the runtime default locale; set it explicitly.

Accessibility

Renders a plain `<span>`; the formatted string is the accessible text.
Mono tabular figures keep columns of numbers vertically aligned.