Helper component for formatting numeric based on the current language and locale-specific conventions.

With <NumericFormat> helper, you can easily ensure that numeric values are displayed consistently and accurately, taking into account factors such as decimal separators, currency symbols, and grouping separators specific to each language.

<NumericFormat> component are built on top of the Intl.NumberFormat APIs which provide a comprehensive support for formatting numbers on locale-specific conventions.

However, there are a few components that should not be used together with this component.



To import the component you just have to use this code below.

import { NumericFormat } from '@marigold/system';


Sorry! There are currently no variants and sizes available.


valuenumber | bigintnoneValue to be formatted.
tabularbooleantrueSpecifies that the digits should take the full width.
minimumFractionDigitsnumbernoneMinimum number of fraction digits to display.
maximumFractionDigitsnumbernoneMaximum number of fraction digits to display.
useGroupingbooleantrueSpecifies whether to use grouping separators (e.g., thousands separator).
compactDisplaylong | shortnone How to display the number in a compact form. Possible values are "short", "long", and "narrow"
currencystringnoneSpecifies the currency code to use when the style is set to currency
currencyDisplaystringstandardSpecifies whether to display the currency symbol or sign. Possible values are "standard" (default), "accounting", and "code"
currencySignstringnoneSpecifies whether to display the currency symbol or sign. Possible values are "standard" (default), "accounting", and "code"
stylestringnoneSpecifies the formatting style for the number. Possible values are "decimal", "currency", "percent", "unit", and "compact"


Formatted Currency Value

In this example the value passed is formatted based on the currency chosen 'USD' .


Formatted Percentage Value

In this example the decimal value is formatted into two fraction digits percentage value .


Formatted Numeric Value

Formats the number with a max of 2 significant digits, only the most significant digits are displayed.

value: 120,000