# Format Byte (VUE)



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

```vue
<script setup lang="ts">
import { Format } from '@ark-ui/vue/format'
import styles from 'styles/format.module.css'
</script>

<template>
  <div :class="styles.Root">
    <span :class="styles.Label">File size</span>
    <span :class="styles.Value">
      <Format.Byte :value="120000" />
    </span>
  </div>
</template>
```

### Sizes

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

```vue
<script setup lang="ts">
import { Format } from '@ark-ui/vue/format'
import styles from 'styles/format.module.css'

const byteSizes = [50, 5000, 5000000, 5000000000]
</script>

<template>
  <div :class="styles.List">
    <div v-for="size in byteSizes" :key="size" :class="styles.ListItem">
      <span :class="styles.Value">
        <Format.Byte :value="size" />
      </span>
    </div>
  </div>
</template>
```

### Locale

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

```vue
<script setup lang="ts">
import { Format } from '@ark-ui/vue/format'
import { LocaleProvider } from '@ark-ui/vue/locale'
import styles from 'styles/format.module.css'

const locales = ['de-DE', 'zh-CN']
</script>

<template>
  <div :class="styles.List">
    <LocaleProvider v-for="locale in locales" :key="locale" :locale="locale">
      <div :class="styles.ListItem">
        <span :class="styles.InlineLabel">{{ locale }}:</span>
        <span :class="styles.Value">
          <Format.Byte :value="1450.45" />
        </span>
      </div>
    </LocaleProvider>
  </div>
</template>
```

### Unit

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

```vue
<script setup lang="ts">
import { Format } from '@ark-ui/vue/format'
import styles from 'styles/format.module.css'
</script>

<template>
  <div :class="styles.Inline">
    <span :class="styles.InlineLabel">File size:</span>
    <span :class="styles.InlineValue">
      <Format.Byte :value="1450.45" unit="bit" />
    </span>
  </div>
</template>
```

### Unit Display

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

```vue
<script setup lang="ts">
import { Format } from '@ark-ui/vue/format'
import styles from 'styles/format.module.css'

const unitDisplays = ['narrow', 'short', 'long'] as const
</script>

<template>
  <div :class="styles.List">
    <div v-for="unitDisplay in unitDisplays" :key="unitDisplay" :class="styles.ListItem">
      <span :class="styles.InlineLabel">{{ unitDisplay }}:</span>
      <span :class="styles.Value">
        <Format.Byte :value="50345.53" :unit-display="unitDisplay" />
      </span>
    </div>
  </div>
</template>
```

### Unit System

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

```vue
<script setup lang="ts">
import { Format } from '@ark-ui/vue/format'
import styles from 'styles/format.module.css'
</script>

<template>
  <div :class="styles.List">
    <div :class="styles.ListItem">
      <span :class="styles.InlineLabel">Decimal (1000 bytes):</span>
      <span :class="styles.InlineValue">
        <Format.Byte :value="1024" unit-system="decimal" />
      </span>
    </div>
    <div :class="styles.ListItem">
      <span :class="styles.InlineLabel">Binary (1024 bytes):</span>
      <span :class="styles.InlineValue">
        <Format.Byte :value="1024" unit-system="binary" />
      </span>
    </div>
  </div>
</template>
```