3.0.0-alpha.4 Alpha
Light Dark Light Dark System Search /

Format Number

<wa-format-number> Since 2.0 stable

Formats a number using the specified locale and options.

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>
  <br /><br />
  <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('wa-input', () => (formatter.value = input.value || 0));
</script>

Examples

Percentages

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

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

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>

Properties

Name Description Reflects
value
value
The number to format.
Type number
Default 0
type
type
The formatting style to use.
Type 'currency' | 'decimal' | 'percent'
Default 'decimal'
noGrouping
no-grouping
Turns off grouping separators.
Type boolean
Default false
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'
minimumIntegerDigits
minimum-integer-digits
The minimum number of integer 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-20.
Type number
maximumFractionDigits
maximum-fraction-digits
The maximum number of fraction digits to use. Possible values are 0-0.
Type number
minimumSignificantDigits
minimum-significant-digits
The minimum number of significant digits to use. Possible values are 1-21.
Type number
maximumSignificantDigits
maximum-significant-digits
The maximum number of significant digits to use,. Possible values are 1-21.
Type number

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code.

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/format-number/format-number.js';
 Coming soon! Coming soon!
    No results