Format Number ​
Formats
Loading...
Formats a number using the specified locale and options. Localization is handled by the browser's Intl.NumberFormat API — no language packs required.
- Tag:
<flint-format-number> - Class:
FlintFormatNumber
Import ​
ts
import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintFormatNumber } from '@getufy/flint-ui';Usage ​
html
<flint-format-number></flint-format-number>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | number | 0 | The number to format. |
type | type | 'currency' | 'decimal' | 'percent' | 'unit' | 'decimal' | The formatting style to use. |
noGrouping | no-grouping | boolean | false | Turns off grouping separators (e.g. thousands separator). |
currency | currency | string | 'USD' | The ISO 4217 currency code to use when formatting (e.g. 'USD', 'EUR', 'GBP'). |
currencyDisplay | currency-display | 'symbol' | 'narrowSymbol' | 'code' | 'name' | 'symbol' | How to display the currency. |
notation | notation | 'standard' | 'scientific' | 'engineering' | 'compact' | 'standard' | Number notation style. 'compact' renders e.g. "1.2K" or "3.4M". |
compactDisplay | compact-display | 'short' | 'long' | 'short' | How to display compact notation — 'short' (1K) or 'long' (1 thousand). |
signDisplay | sign-display | 'auto' | 'never' | 'always' | 'exceptZero' | 'auto' | When to show the sign. |
unit | unit | string | '' | ECMA-402 unit identifier (e.g. 'kilometer', 'kilogram', 'celsius'). Required when type='unit'. |
unitDisplay | unit-display | 'short' | 'long' | 'narrow' | 'short' | How to display the unit when type='unit'. |
minimumIntegerDigits | minimum-integer-digits | number | undefined | undefined | The minimum number of integer digits (1–21). |
minimumFractionDigits | minimum-fraction-digits | number | undefined | undefined | The minimum number of fraction digits (0–20). |
maximumFractionDigits | maximum-fraction-digits | number | undefined | undefined | The maximum number of fraction digits (0–20). |
minimumSignificantDigits | minimum-significant-digits | number | undefined | undefined | The minimum number of significant digits (1–21). |
maximumSignificantDigits | maximum-significant-digits | number | undefined | undefined | The maximum number of significant digits (1–21). |
lang | lang | string | '' | BCP 47 language tag for formatting locale. Inherits from the document when unset. |
CSS Parts ​
| Name | Description |
|---|---|
base | The component's base wrapper element. |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-format-number-color | — |
--flint-format-number-font-size | — |
--flint-format-number-font-weight | — |
--flint-format-number-font-family | — |
--flint-format-number-positive-color | — |
--flint-format-number-negative-color | — |