NumericFormat
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.
Import
import { NumericFormat } from '@marigold/system';Appearance
Sorry! There are currently no variants and sizes available.
Props
| Property | Type | Default | Description |
|---|---|---|---|
value | number | bigint | none | Value to be formatted. |
tabular | boolean | true | Specifies that the digits should take the full width. |
minimumFractionDigits | number | none | Minimum number of fraction digits to display. |
maximumFractionDigits | number | none | Maximum number of fraction digits to display. |
useGrouping | boolean | true | Specifies whether to use grouping separators (e.g., thousands separator). |
compactDisplay | long | short | none | How to display the number in a compact form. Possible values are "short", "long", and "narrow" |
currency | string | none | Specifies the currency code to use when the style is set to currency |
currencyDisplay | string | standard | Specifies whether to display the currency symbol or sign. Possible values are "standard" (default), "accounting", and "code" |
currencySign | string | none | Specifies whether to display the currency symbol or sign. Possible values are "standard" (default), "accounting", and "code" |
style | string | none | Specifies the formatting style for the number. Possible values are "decimal", "currency", "percent", "unit", and "compact" |
Examples
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.