Format Bytes

<sl-format-bytes> | SlFormatBytes

Since 2.0

stable

Formats a number as a human readable bytes value.

The file is in size.

<div class="format-bytes-overview">
  The file is <sl-format-bytes value="1000"></sl-format-bytes> in size. <br /><br />
  <sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>
</div>

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

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

import { useState } from 'react';
import SlButton from '@shoelace-style/shoelace/dist/react/button';
import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
import SlInput from '@shoelace-style/shoelace/dist/react/input';

const App = () => {
  const [value, setValue] = useState(1000);

  return (
    <>
      The file is <SlFormatBytes value={value} /> in size.
      <br />
      <br />
      <SlInput
        type="number"
        value={value}
        label="Number to Format"
        style={{ maxWidth: '180px' }}
        onSlInput={event => setValue(event.target.value)}
      />
    </>
  );
};

Examples

Formatting Bytes

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

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

import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';

const App = () => (
  <>
    <SlFormatBytes value="12" />
    <br />
    <SlFormatBytes value="1200" />
    <br />
    <SlFormatBytes value="1200000" />
    <br />
    <SlFormatBytes value="1200000000" />
  </>
);

Formatting Bits

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

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

import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';

const App = () => (
  <>
    <SlFormatBytes value="12" unit="bit" />
    <br />
    <SlFormatBytes value="1200" unit="bit" />
    <br />
    <SlFormatBytes value="1200000" unit="bit" />
    <br />
    <SlFormatBytes value="1200000000" unit="bit" />
  </>
);

Localization

Use the lang attribute to set the number formatting locale.

<sl-format-bytes value="12" lang="de"></sl-format-bytes><br />
<sl-format-bytes value="1200" lang="de"></sl-format-bytes><br />
<sl-format-bytes value="1200000" lang="de"></sl-format-bytes><br />
<sl-format-bytes value="1200000000" lang="de"></sl-format-bytes>

import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';

const App = () => (
  <>
    <SlFormatBytes value="12" lang="de" />
    <br />
    <SlFormatBytes value="1200" lang="de" />
    <br />
    <SlFormatBytes value="1200000" lang="de" />
    <br />
    <SlFormatBytes value="1200000000" lang="de" />
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.17.1/cdn/components/format-bytes/format-bytes.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.17.1/cdn/components/format-bytes/format-bytes.js';

To import this component using a bundler:

import '@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.js';

To import this component as a React component:

import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';

Properties

Name	Description	Type	Default
`value`	The number to format in bytes.	`number`	`0`
`unit`	The type of unit to display.	`'byte' \| 'bit'`	`'byte'`
`display`	Determines how to display the result, e.g. “100 bytes”, “100 b”, or “100b”.	`'long' \| 'short' \| 'narrow'`	`'short'`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.