A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat.
Provide a currency attribute when formatStyle is currency, and a unit attribute when formatStyle is unit.
<nve-format-number>1234567.89</nve-format-number>
1234567.89
Installation
<script type="module">
import '@nvidia-elements/core/format-number/define.js';
</script>
<nve-format-number>1234567.89</nve-format-number>
nve api.get nve-format-number
Default
Basic decimal formatting with localized grouping separators. Use for inline counts and metrics.
<nve-format-number>1234567.89</nve-format-number>
1234567.89
Currency
Currency formatting for monetary values with locale-aware symbols and separators. Use for prices, budgets, and financial totals.
<div nve-layout="column gap:sm">
<nve-format-number format-style="currency" currency="USD">1234.56</nve-format-number>
<nve-format-number format-style="currency" currency="EUR" currency-display="code">1234.56</nve-format-number>
<nve-format-number format-style="currency" currency="JPY" currency-display="name">1234</nve-format-number>
</div>
Percent
Percent formatting for ratios and completion values. Source values should already represent a fraction (such as 0.85 for 85 percent).
<div nve-layout="column gap:sm">
<nve-format-number format-style="percent">0.85</nve-format-number>
<nve-format-number format-style="percent">0.126</nve-format-number>
</div>
Unit
Unit formatting for measurements and quantities. Use for distances, storage sizes, or other numeric labels that need a localized unit suffix.
<div nve-layout="column gap:sm">
<nve-format-number format-style="unit" unit="kilometer">1234.56</nve-format-number>
<nve-format-number format-style="unit" unit="byte" unit-display="long">2048</nve-format-number>
<nve-format-number format-style="unit" unit="celsius" unit-display="narrow">22</nve-format-number>
</div>
Notation
Notation presets for scientific, engineering, and compact display. Use compact notation in dashboards or cards where space matters.
<div nve-layout="column gap:sm">
<nve-format-number notation="compact" compact-display="short">1234567</nve-format-number>
<nve-format-number notation="compact" compact-display="long">1234567</nve-format-number>
<nve-format-number notation="scientific">1234567</nve-format-number>
<nve-format-number notation="engineering">1234567</nve-format-number>
</div>
1234567
1234567
1234567
1234567
Sign Display
Sign display options for controlling positive and negative indicators. Use 'always' for delta values or 'exceptZero' for change indicators.
<div nve-layout="column gap:sm">
<nve-format-number sign-display="always">42</nve-format-number>
<nve-format-number sign-display="always">-42</nve-format-number>
<nve-format-number sign-display="exceptZero">0</nve-format-number>
<nve-format-number sign-display="never">-42</nve-format-number>
</div>
Fraction Digits
Fraction digit control for tuning decimal precision. Use to enforce fixed decimal places in financial or scientific contexts.
<div nve-layout="column gap:sm">
<nve-format-number minimum-fraction-digits="4">1.5</nve-format-number>
<nve-format-number maximum-fraction-digits="0">1.567</nve-format-number>
<nve-format-number minimum-fraction-digits="2" maximum-fraction-digits="2">3</nve-format-number>
</div>
Locale
Explicit locale settings for internationalized number output. Use when the target audience locale differs from the document language or browser default.
<div nve-layout="column gap:sm">
<nve-format-number locale="de-DE" format-style="currency" currency="EUR">1234.56</nve-format-number>
<nve-format-number locale="ja-JP" format-style="currency" currency="JPY">1234</nve-format-number>
<nve-format-number locale="fr-FR">1234567.89</nve-format-number>
</div>
Number Attribute
Number attribute input for values supplied by JavaScript or bound data. By default, the component formats text content, which also serves as the SSR fallback, and number wins when both are present.
<nve-format-number number="1234.56" format-style="currency" currency="USD"></nve-format-number>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs Preview
API Documentation
Fully Themeable
beta
Robust unit test coverages
Passed API Review
Passed Designer VQA Review
Included in library package
stable
No known outstanding AA WCAG issues
No known outstanding performance issues
Adapts to different screen/container sizes
No breaking API changes for at least 90 days