Format Bytes

<pc-format-bytes>

1.0.0-alpha.1

experimental

Formats a number as a human‐readable byte value.

<div class="format-bytes-overview">
    <p>
        The file is <pc-format-bytes value="1000"></pc-format-bytes> in size.
    </p>

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

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

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

Code

Edit

Demos

Formatting bytes

Set the value attribute to a number to get the value in bytes.

<pc-format-bytes value="12"></pc-format-bytes>
<br />
<pc-format-bytes value="1200"></pc-format-bytes>
<br />
<pc-format-bytes value="1200000"></pc-format-bytes>
<br />
<pc-format-bytes value="1200000000"></pc-format-bytes>

Code

Edit

Formatting bits

To get the value in bits, set the unit attribute to bit.

<pc-format-bytes value="12" unit="bit"></pc-format-bytes>
<br />
<pc-format-bytes value="1200" unit="bit"></pc-format-bytes>
<br />
<pc-format-bytes value="1200000" unit="bit"></pc-format-bytes>
<br />
<pc-format-bytes value="1200000000" unit="bit"></pc-format-bytes>

Code

Edit

Localisation

Use the lang attribute to set the number formatting locale.

<pc-format-bytes value="12" lang="fr"></pc-format-bytes>
<br />
<pc-format-bytes value="1200" lang="fr"></pc-format-bytes>
<br />
<pc-format-bytes value="1200000" lang="fr"></pc-format-bytes>
<br />
<pc-format-bytes value="1200000000" lang="fr"></pc-format-bytes>

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 renders the byte/bit unit as short instead of long.

<pc-format-bytes value="12" use-si></pc-format-bytes>
<br />
<pc-format-bytes value="1200" use-si></pc-format-bytes>
<br />
<pc-format-bytes value="1200000" use-si></pc-format-bytes>
<br />
<pc-format-bytes value="1200000000" use-si></pc-format-bytes>

Code

Edit

Properties

Name	Description	Default
`value`	The number to format in bytes. Type: `number`	`0`
`unit`	The type of unit to display. Type: `"byte" \| "bit"`	`"byte"`
`display`	Determines how to display the result. (Narrow: 100B, Short: 100 B, Long: 100 bytes) Type: `"long" \| "short" \| "narrow"`	`"short"`
`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-bytes/format-bytes.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-bytes/format-bytes.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-bytes/format-bytes.js";