# Format Byte (SOLID)



## Usage

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

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

## Examples

### Basic

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

```tsx
import { Format } from '@ark-ui/solid/format'
import styles from 'styles/format.module.css'

export const ByteBasic = () => {
  return (
    <div class={styles.Root}>
      <span class={styles.Label}>File size</span>
      <span class={styles.Value}>
        <Format.Byte value={120000} />
      </span>
    </div>
  )
}
```

### Sizes

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

```tsx
import { Format } from '@ark-ui/solid/format'
import { For } from 'solid-js'
import styles from 'styles/format.module.css'

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

  return (
    <div class={styles.List}>
      <For each={byteSizes}>
        {(size) => (
          <div class={styles.ListItem}>
            <span class={styles.Value}>
              <Format.Byte value={size} />
            </span>
          </div>
        )}
      </For>
    </div>
  )
}
```

### Locale

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

```tsx
import { Format } from '@ark-ui/solid/format'
import { LocaleProvider } from '@ark-ui/solid/locale'
import { For } from 'solid-js'
import styles from 'styles/format.module.css'

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

  return (
    <div class={styles.List}>
      <For each={locales}>
        {(locale) => (
          <LocaleProvider locale={locale}>
            <div class={styles.ListItem}>
              <span class={styles.InlineLabel}>{locale}:</span>
              <span class={styles.Value}>
                <Format.Byte value={1450.45} />
              </span>
            </div>
          </LocaleProvider>
        )}
      </For>
    </div>
  )
}
```

### Unit

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

```tsx
import { Format } from '@ark-ui/solid/format'
import styles from 'styles/format.module.css'

export const ByteWithUnit = () => {
  return (
    <div class={styles.Inline}>
      <span class={styles.InlineLabel}>File size:</span>
      <span class={styles.InlineValue}>
        <Format.Byte value={1450.45} unit="bit" />
      </span>
    </div>
  )
}
```

### Unit Display

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

```tsx
import { Format } from '@ark-ui/solid/format'
import { For } from 'solid-js'
import styles from 'styles/format.module.css'

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

  return (
    <div class={styles.List}>
      <For each={unitDisplays}>
        {(unitDisplay) => (
          <div class={styles.ListItem}>
            <span class={styles.InlineLabel}>{unitDisplay}:</span>
            <span class={styles.Value}>
              <Format.Byte value={50345.53} unitDisplay={unitDisplay} />
            </span>
          </div>
        )}
      </For>
    </div>
  )
}
```

### Unit System

Use the `unitSystem` prop to specify whether to use decimal (1000 bytes) or binary (1024 bytes) unit system.

```tsx
import { Format } from '@ark-ui/solid/format'
import styles from 'styles/format.module.css'

export const ByteWithUnitSystem = () => {
  return (
    <div class={styles.List}>
      <div class={styles.ListItem}>
        <span class={styles.InlineLabel}>Decimal (1000 bytes):</span>
        <span class={styles.InlineValue}>
          <Format.Byte value={1024} unitSystem="decimal" />
        </span>
      </div>
      <div class={styles.ListItem}>
        <span class={styles.InlineLabel}>Binary (1024 bytes):</span>
        <span class={styles.InlineValue}>
          <Format.Byte value={1024} unitSystem="binary" />
        </span>
      </div>
    </div>
  )
}
```