Format Number

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 { FormatNumber } from "@chakra-ui/react"

<FormatNumber value={1000} />

Examples

Percentage

Use the style=percentage prop to change the number format to percentage.

Currency

Use the style=currency prop to change the number format to currency.

Locale

Wrap the FormatNumber component within the LocaleProvider to change the locale.

Unit

Use the style=unit prop to change the number format to unit.

Compact Notation

Use the notation=compact prop to change the number format to compact notation.

Props

The FormatNumber component supports all Intl.NumberFormat options in addition to the following props: