Utilities
Format byte

Format Byte

Used to format byte values with various options and units

File Size

120 kB

Usage

The byte formatting component extends the number formatting capabilities to handle byte-specific formatting, including automatic unit conversion and display options.

import { Format } from '@ark-ui/react'

Examples

Basic

Use the Format.Byte component to format a byte value with default options.

import { Format } from '@ark-ui/solid/format'

export const ByteBasic = () => {
  return (
    <div>
      File size: <Format.Byte value={1450.45} />
    </div>
  )
}

Sizes

Use the sizes prop to specify custom byte sizes for formatting.

import { Format } from '@ark-ui/solid/format'
import { For } from 'solid-js'

export const ByteSizes = () => {
  const byteSizes = [50, 5000, 5000000, 5000000000]

  return (
    <div>
      <For each={byteSizes}>
        {(size) => (
          <div>
            <Format.Byte value={size} />
          </div>
        )}
      </For>
    </div>
  )
}

Locale

Use the locale prop to format the byte value according to a specific locale.

import { Format } from '@ark-ui/solid/format'
import { LocaleProvider } from '@ark-ui/solid/locale'
import { For } from 'solid-js'

export const ByteWithLocale = () => {
  const locales = ['de-DE', 'zh-CN']
  const value = 1450.45

  return (
    <div>
      <For each={locales}>
        {(locale) => (
          <LocaleProvider locale={locale}>
            <Format.Byte value={value} />
          </LocaleProvider>
        )}
      </For>
    </div>
  )
}

Unit

Use the unit prop to specify the unit of the byte value.

import { Format } from '@ark-ui/solid/format'

export const ByteWithUnit = () => {
  const value = 1450.45
  const unit = 'bit'

  return (
    <div>
      File size: <Format.Byte value={value} unit={unit} />
    </div>
  )
}

Unit Display

Use the unitDisplay prop to specify the display of the unit.

import { Format } from '@ark-ui/solid/format'
import { For } from 'solid-js'

export const ByteWithUnitDisplay = () => {
  const value = 50345.53
  const unitDisplays = ['narrow', 'short', 'long'] as const

  return (
    <div>
      <For each={unitDisplays}>
        {(unitDisplay) => <Format.Byte value={value} unitDisplay={unitDisplay} />}
      </For>
    </div>
  )
}