Format Number
<wa-format-number>
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('input', () => (formatter.value = input.value || 0)); </script>
Examples
Jump to heading
Percentages
Jump to heading
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
Jump to heading
Use the lang attribute to set the number formatting locale.
English:
German:
Russian:
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
Jump to heading
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
Jump to heading
Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/format-number/format-number.js';
To manually import this component from React, use the following code.
import WaFormatNumber from '@awesome.me/webawesome/dist/react/format-number';
Attributes & Properties
Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefined |
||
currencycurrency |
The ISO 4217 currency code to use when formatting.
Type
stringDefault
'USD' |
||
currencyDisplaycurrency-display |
How to display the currency.
Type
'symbol' | 'narrowSymbol' | 'code' | 'name'Default
'symbol' |
||
customStates |
Methods for setting and checking custom states.
Type
objectDefault
{ /** Adds or removes the specified custom state. / set: (customState: string, active: boolean) => { if (!Boolean(this.internals?.states)) return; try { if (active) { this.internals.states.add(customState); } else { this.internals.states.delete(customState); } } catch (e) { if (String(e).includes("must start with '--'")) { / eslint-disable-next-line / console.error('Your browser implements an outdated version of CustomStateSet. Consider using a polyfill'); } else { throw e; } } }, /* Determines whether or not the element currently has the specified state. */ has: (customState: string) => { if (!Boolean(this.internals?.states)) return false; try { return this.internals.states.has(customState); } catch { return false; } }, } |
||
maximumFractionDigitsmaximum-fraction-digits |
The maximum number of fraction digits to use. Possible values are 0-100.
Type
number |
||
maximumSignificantDigitsmaximum-significant-digits |
The maximum number of significant digits to use,. Possible values are 1-21.
Type
number |
||
minimumFractionDigitsminimum-fraction-digits |
The minimum number of fraction digits to use. Possible values are 0-100.
Type
number |
||
minimumIntegerDigitsminimum-integer-digits |
The minimum number of integer digits to use. Possible values are 1-21.
Type
number |
||
minimumSignificantDigitsminimum-significant-digits |
The minimum number of significant digits to use. Possible values are 1-21.
Type
number |
||
typetype |
The formatting style to use.
Type
'currency' | 'decimal' | 'percent'Default
'decimal' |
||
valuevalue |
The number to format.
Type
numberDefault
0 |
||
withoutGroupingwithout-grouping |
Turns off grouping separators.
Type
booleanDefault
false |
Methods
Jump to heading
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
relayNativeEvent() |
Given a native event, this function cancels it and dispatches it again from the host element using the desired event options. |
event: Event,
eventOptions: EventInit
|
Need a hand?