NumberFormatter

Renders a formatted number inside a <span>. Supports prefix/suffix text, thousands separators with multiple grouping styles, decimal scale control, and fixed decimal padding.

Currency

$1,234,567.89

€9,999.00

£42,000

<NumberFormatter value={1234567.89} prefix="$" thousandSeparator decimalScale={2} fixedDecimalScale />
<NumberFormatter value={9999} prefix="€" thousandSeparator="," decimalScale={2} fixedDecimalScale />

Suffix units

3.14 km

72%

1,500,000 items

<NumberFormatter value={3.14159} suffix=" km" decimalScale={2} />
<NumberFormatter value={72} suffix="%" />
<NumberFormatter value={1500000} suffix=" items" thousandSeparator />

Grouping styles

Standard: 1,234,567

Indian (lakh): 12,34,567

CJK (wan): 123,4567

<NumberFormatter value={1234567} thousandSeparator thousandsGroupStyle="thousand" />
<NumberFormatter value={1234567} thousandSeparator thousandsGroupStyle="lakh" />
<NumberFormatter value={1234567} thousandSeparator thousandsGroupStyle="wan" />

Custom decimal separator

1.234,56

<NumberFormatter value={1234.56} thousandSeparator="." decimalSeparator="," />

Props

PropTypeDefaultDescription
valuenumber|string—The numeric value to format
prefixstring''String prepended to the formatted number (e.g. '$')
suffixstring''String appended to the formatted number (e.g. ' USD')
thousandSeparatorboolean|string—Enables thousands grouping; true uses ',' or provide a custom string
thousandsGroupStyle'thousand'|'lakh'|'wan'|'none''thousand'Grouping style when separator is enabled
decimalSeparatorstring'.'Character used as the decimal point
decimalScalenumber—Maximum number of decimal places to display
fixedDecimalScalebooleanfalseAlways pads decimal to decimalScale digits