Format Number

<wa-format-number>

Stable

Formats a number for display using the specified locale and options, including currency, percent, and unit styles. Powered by the Intl.NumberFormat API.

Localization is handled by the browser's Intl.NumberFormat API. No language packs are required.

<div class="format-number-overview">
  <wa-format-number value="1000"></wa-format-number>

  <wa-divider></wa-divider>

  <wa-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></wa-input>
</div>

<script>
  const container = document.querySelector('.format-number-overview');
  const formatter = container.querySelector('wa-format-number');
  const input = container.querySelector('wa-input');

  input.addEventListener('input', () => (formatter.value = input.value || 0));
</script>

Examples

Link to This Section

Percentages

Link to This Section

To get the value as a percent, set the type attribute to percent.

<wa-format-number type="percent" value="0"></wa-format-number><br />
<wa-format-number type="percent" value="0.25"></wa-format-number><br />
<wa-format-number type="percent" value="0.50"></wa-format-number><br />
<wa-format-number type="percent" value="0.75"></wa-format-number><br />
<wa-format-number type="percent" value="1"></wa-format-number>

Localization

Link to This Section

Use the lang attribute to set the number formatting locale.

English: 

German: 

Russian:

English: <wa-format-number value="2000" lang="en" minimum-fraction-digits="2"></wa-format-number><br />
German: <wa-format-number value="2000" lang="de" minimum-fraction-digits="2"></wa-format-number><br />
Russian: <wa-format-number value="2000" lang="ru" minimum-fraction-digits="2"></wa-format-number>

Currency

Link to This Section

To format a number as a monetary value, set the type attribute to currency and set the currency attribute to the desired ISO 4217 currency code. You should also specify lang to ensure the the number is formatted correctly for the target locale.

<wa-format-number type="currency" currency="USD" value="2000" lang="en-US"></wa-format-number><br />
<wa-format-number type="currency" currency="GBP" value="2000" lang="en-GB"></wa-format-number><br />
<wa-format-number type="currency" currency="EUR" value="2000" lang="de"></wa-format-number><br />
<wa-format-number type="currency" currency="RUB" value="2000" lang="ru"></wa-format-number><br />
<wa-format-number type="currency" currency="CNY" value="2000" lang="zh-cn"></wa-format-number>

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/webawesome@0.17.0/components/format-number/format-number.js';

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/format-number/format-number.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/format-number/format-number.js';

To import this component for React 18 or below, use the following code:

import WaFormatNumber from '@awesome.me/webawesome/dist/react/format-number/index.js';

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`currency` `currency`	The ISO 4217 currency code to use when formatting. Type `string` Default `'USD'`
`currencyDisplay` `currency-display`	How to display the currency. Type `'symbol' \| 'narrowSymbol' \| 'code' \| 'name'` Default `'symbol'`
`maximumFractionDigits` `maximum-fraction-digits`	The maximum number of fraction digits to use. Possible values are 0-100. Type `number`
`maximumSignificantDigits` `maximum-significant-digits`	The maximum number of significant digits to use,. Possible values are 1-21. Type `number`
`minimumFractionDigits` `minimum-fraction-digits`	The minimum number of fraction digits to use. Possible values are 0-100. Type `number`
`minimumIntegerDigits` `minimum-integer-digits`	The minimum number of integer digits to use. Possible values are 1-21. Type `number`
`minimumSignificantDigits` `minimum-significant-digits`	The minimum number of significant digits to use. Possible values are 1-21. Type `number`
`type` `type`	The formatting style to use. Type `'currency' \| 'decimal' \| 'percent'` Default `'decimal'`
`value` `value`	The number to format. Type `number` Default `0`
`withoutGrouping` `without-grouping`	Turns off grouping separators. Type `boolean` Default `false`

Need a hand?

Report a bug

Ask for help

Format Number

Examples

Percentages

Localization

Currency

Importing

Attributes & Properties

Quick Links

Recent Searches