Format Number

Used to format numbers to a specific locale and options

120K

downloads per month

Usage

The number formatting logic is handled by the native Intl.NumberFormat API and smartly cached to avoid performance issues when using the same locale and options.

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

Examples

Basic

Use the Format.Number component to format a number with default options.

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

export const NumberBasic = () => {
  return <Format.Number value={1450.45} />
}

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

export const NumberBasic = () => {
  return <Format.Number value={1450.45} />
}

<script setup lang="ts">
import { Format } from '@ark-ui/vue'
</script>

<template>
  <Format.Number :value="1450.45" />
</template>

Percentage

Use the style="percent" prop to format the number as a percentage.

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

export const NumberWithPercentage = () => {
  return (
    <Format.Number
      value={0.145}
      style="percent"
      maximumFractionDigits={2}
      minimumFractionDigits={2}
    />
  )
}

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

export const NumberWithPercentage = () => {
  return (
    <Format.Number
      value={0.145}
      style="percent"
      maximumFractionDigits={2}
      minimumFractionDigits={2}
    />
  )
}

<script setup lang="ts">
import { Format } from '@ark-ui/vue'
</script>

<template>
  <Format.Number
    :value="0.145"
    style="percent"
    :maximum-fraction-digits="2"
    :minimum-fraction-digits="2"
  />
</template>

Currency

Use the style="currency" prop along with the currency prop to format the number as a currency.

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

export const NumberWithCurrency = () => {
  return <Format.Number value={1234.45} style="currency" currency="USD" />
}

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

export const NumberWithCurrency = () => {
  return <Format.Number value={1234.45} style="currency" currency="USD" />
}

<script setup lang="ts">
import { Format } from '@ark-ui/vue'
</script>

<template>
  <Format.Number :value="1234.45" style="currency" currency="USD" />
</template>

Locale

Use the locale prop to format the number according to a specific locale.

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

export const NumberWithLocale = () => {
  return (
    <LocaleProvider locale="de-DE">
      <Format.Number value={1450.45} />
    </LocaleProvider>
  )
}

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

export const NumberWithLocale = () => {
  return (
    <LocaleProvider locale="de-DE">
      <Format.Number value={1450.45} />
    </LocaleProvider>
  )
}

<script setup lang="ts">
import { Format } from '@ark-ui/vue'
import { LocaleProvider } from '@ark-ui/vue'
</script>

<template>
  <LocaleProvider locale="de-DE">
    <Format.Number :value="1450.45" />
  </LocaleProvider>
</template>

Unit

Use the style="unit" prop along with the unit prop to format the number with a specific unit.

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

export const NumberWithUnit = () => {
  return <Format.Number value={384.4} style="unit" unit="kilometer" />
}

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

export const NumberWithUnit = () => {
  return <Format.Number value={384.4} style="unit" unit="kilometer" />
}

<script setup lang="ts">
import { Format } from '@ark-ui/vue'
</script>

<template>
  <Format.Number :value="384.4" style="unit" unit="kilometer" />
</template>

Compact Notation

Use the notation="compact" prop to format the number in compact notation.

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

export const NumberWithCompact = () => {
  return <Format.Number value={1500000} notation="compact" compactDisplay="short" />
}

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

export const NumberWithCompact = () => {
  return <Format.Number value={1500000} notation="compact" compactDisplay="short" />
}

<script setup lang="ts">
import { Format } from '@ark-ui/vue'
</script>

<template>
  <Format.Number :value="1500000" notation="compact" compact-display="short" />
</template>