Format Number

<pc-format-number>

1.0.0-alpha.1

experimental

Formats a number using the specified locale and options.

Localisation is handled by the browser’s Intl.DateTimeFormat API. No language packs are required.

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

    <br /><br />

    <pc-input
        label="Number to format"
        type="number"
        value="1000"
        style="max-inline-size: 180px"
    ></pc-input>
</div>

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

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

Code

Edit

Demos

Percentages

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

<pc-format-number type="percent" value="0"></pc-format-number>
<br />
<pc-format-number type="percent" value="0.5"></pc-format-number>
<br />
<pc-format-number type="percent" value="0.75"></pc-format-number>
<br />
<pc-format-number type="percent" value="1"></pc-format-number>

Code

Edit

Localisation

Use the lang attribute to set the number formatting locale.

English: <pc-format-number value="2000" lang="en" minimum-fraction-digits="2"></pc-format-number>
<br />
German: <pc-format-number value="2000" lang="de" minimum-fraction-digits="2"></pc-format-number>
<br />
French: <pc-format-number value="2000" lang="fr" minimum-fraction-digits="2"></pc-format-number>

Code

Edit

SI conventions

Add the use-si attribute to change the formatting of the component to follow SI conventions.

This property is experimental and does not work on currencies.

<strong>With local conventions</strong><br />
<pc-format-number value="1000"></pc-format-number>
<br />
<pc-format-number value="1234567.89"></pc-format-number>

<br /><br />

<strong>With SI conventions</strong><br />
<pc-format-number value="1000" use-si></pc-format-number>
<br />
<pc-format-number value="1234567.89" use-si></pc-format-number>

Code

Edit

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 the lang attribute to ensure that the number and currency symbol is formatted correctly for the target locale.

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

Code

Edit

Properties

Name	Description	Default
`value`	The number to format. Type: `number`	`0`
`type`	The formatting style to use. Type: `"currency" \| "decimal" \| "percent"`	`"decimal"`
`withoutGrouping` `without-grouping`	Turns off grouping separators. Type: `boolean`	`false`
`currency`	The ISO 4217 currency code to use when formatting. Type: `string`	`"USD"`
`currencyDisplay` `currency-display`	Specifies how to display the currency. Type: `"symbol" \| "narrowSymbol" \| "code" \| "name"`	`"symbol"`
`minimumIntegerDigits` `minimum-integer-digits`	The minimum number of integer digits to use. Possible values are 1–21. Type: `number \| undefined`	‐
`minimumFractionDigits` `minimum-fraction-digits`	The minimum number of fraction digits to use. Possible values are 0–100. Type: `number \| undefined`	‐
`maximumFractionDigits` `maximum-fraction-digits`	The maximum number of fraction digits to use. Possible values are 0–100. Type: `number \| undefined`	‐
`minimumSignificantDigits` `minimum-significant-digits`	The minimum number of significant digits to use. Possible values are 1–21. Type: `number \| undefined`	‐
`maximumSignificantDigits` `maximum-significant-digits`	The maximum number of significant digits to use,. Possible values are 1–21. Type: `number \| undefined`	‐
`useSI` `use-si`	Forces the component to use the SI standard for formatting. This overrides locale‐specific rules. Type: `boolean`	`false`
`updateComplete`	A read‐only promise that resolves when the component has finished updating.	‐

Learn more about customising animations.

Importing

If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.

CDN (script tag)

CDN (import)

npm (import)

To manually import this component from the CDN, copy this code snippet and paste it in your HTML.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/format-number/format-number.js"></script> 

To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/format-number/format-number.js"; 

To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.

import "placer-toolkit/dist/components/format-number/format-number.js";