Shows numbers, amounts or percentages neatly formatted in your site's language — for example as a price in euros with the right separator.
Use FormatNumber for any raw numeric value that needs locale-correct formatting — a price, a percentage, a quantity — so 1234.5 becomes "€ 1.234,50" or "$1,234.50" depending on the site's language, without manual string manipulation.
A typical case is a product or pricing page: store the raw price as a number in the record, and let FormatNumber render it consistently everywhere it appears, including on multilingual versions of the same page.
Where formatted numbers matter
On a webshop, FormatNumber is the block behind every price shown on a product or cart page, making sure a raw value like 1234.5 in the database always displays as "€ 1.234,50" for a Dutch visitor and "€1,234.50" for an English one. On a portfolio site it's useful for a static statistic in a case study — "40% faster load time" or "€250k budget managed" — kept as a real number in the record rather than typed as a formatted string that has to be corrected by hand if it changes. On a professional services site it commonly formats a success rate, an hourly fee, or a client retention percentage consistently across every page that references it.
A common mistake is formatting numbers manually by concatenating a currency symbol and rounded decimals in code, which breaks the moment the site adds a second language with different separator conventions. Another is inconsistent decimal precision across a page, showing "€49.99" in one place and "€50" in another for what should read as the same style; picking a consistent style and decimal count per context avoids that mismatch.
For a number that should draw attention and animate into place rather than sit as static text, use GsapCounter instead — FormatNumber is the right choice for prices, quantities and other values that should simply read correctly, while GsapCounter is for the handful of headline statistics meant to catch the eye. Inside a pricing table built with Records, FormatNumber is typically what renders the price column for every row.
Because it outputs plain, correctly formatted text rather than an image or canvas element, the result is fully selectable, copyable and readable by screen readers exactly as any other number on the page would be.
<FormatNumber value='1234.5' style='currency' currency='EUR' />