Utilities
Format number

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/solid/format'

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

Percentage

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

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

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

Currency

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

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

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

Locale

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

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

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

Unit

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

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

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

Compact Notation

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

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

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