Skip to main content Sidebar
Design tokens Components Layout Style utilities
Privacy Code of Conduct Licence Impressum
© 2025 Placer • Built with Astro

We’d love to hear from you. Please reach out to us with any questions or inquiries you may have.

You can contact us via e‐mail at placer.coc.reports+contact@gmail.com.

We look forward to hearing from you!

Got it!
Skip to table of contents

The Placer Toolkit alpha has arrived! 🎉
Plenty of changes are coming your way—some big, some breaking, some even nuclear! Beware the changelog…

Bring it on!

    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.

    Edit

    Localisation#

    Use the lang attribute to set the number formatting locale.

    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.
    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.

    Edit

    Properties#

    NameDescriptionReflectsDefault
    valueThe number to format.
    Type: number    		 0
    typeThe formatting style to use.
    Type: "currency" | "decimal" | "percent"    		 "decimal"
    withoutGrouping
    without-grouping    		Turns off grouping separators.
    Type: boolean    		 false
    currencyThe 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 attributes and properties.

    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.1/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.1/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";