Format Number

Used to format numbers to a specific locale and options

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.

Percentage

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

Currency

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

Locale

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

Unit

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

Compact Notation

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