Formatters
Format Number
Formats a number with Intl.NumberFormat — decimal, currency or percent, with optional compact notation (1K / 1M) and fixed precision.
Preview
Section titled “Preview”<nana-format-number
type="currency"
value="1234.5"
currency="USD"
></nana-format-number>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/format-number";Basic usage
Section titled “Basic usage”<nana-format-number type="currency" value="1234.5" currency="USD"></nana-format-number>Examples
Section titled “Examples”<nana-format-number
value="1234567.891"
maximum-fraction-digits="2"
></nana-format-number>
<nana-format-number
value="1499.99"
type="currency"
currency="USD"
></nana-format-number>
<nana-format-number
value="0.4237"
type="percent"
maximum-fraction-digits="1"
></nana-format-number>
<nana-format-number value="1500000" notation="compact"></nana-format-number>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
currency | currency | string | 'USD' | ISO 4217 currency code (when type="currency") |
currencyDisplay | currency-display | 'symbol' | 'narrowSymbol' | 'code' | 'name' | 'symbol' | How to display the currency |
grouping | grouping | boolean | true | Group thousands (off → no separators) |
locale | locale | string | undefined | — | BCP 47 locale (defaults to the document locale) |
maximumFractionDigits | maximum-fraction-digits | number | undefined | — | Maximum fraction digits |
minimumFractionDigits | minimum-fraction-digits | number | undefined | — | Minimum fraction digits |
notation | notation | 'standard' | 'compact' | 'standard' | standard or compact (1K, 1M) |
type | type | FormatNumberType | 'decimal' | Formatting style |
value | value | number | 0 | The number to format |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Format Number interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook