Format Number

Used to format numbers to a specific locale and options

1,450.45

import { FormatNumber, Text } from "@chakra-ui/react"

export const FormatNumberBasic = () => {
  return (
    <Text textStyle="lg">
      <FormatNumber value={1450.45} />
    </Text>
  )
}

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.

14.50%

import { FormatNumber, Text } from "@chakra-ui/react"

export const FormatNumberWithPercentage = () => {
  return (
    <Text textStyle="lg">
      <FormatNumber
        value={0.145}
        style="percent"
        maximumFractionDigits={2}
        minimumFractionDigits={2}
      />
    </Text>
  )
}

Currency

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

$1,234.45

import { FormatNumber, Text } from "@chakra-ui/react"

export const FormatNumberWithCurrency = () => {
  return (
    <Text textStyle="lg">
      <FormatNumber value={1234.45} style="currency" currency="USD" />
    </Text>
  )
}

Locale

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

de-DE

1.450,45

zh-CN

1,450.45

import { FormatNumber, HStack, LocaleProvider, Text } from "@chakra-ui/react"

export const FormatNumberWithLocale = () => {
  return (
    <Text textStyle="lg">
      <HStack>
        <Text fontWeight="medium">de-DE</Text>
        <LocaleProvider locale="de-DE">
          <FormatNumber value={1450.45} />
        </LocaleProvider>
      </HStack>

      <HStack>
        <Text fontWeight="medium">zh-CN</Text>
        <LocaleProvider locale="zh-CN">
          <FormatNumber value={1450.45} />
        </LocaleProvider>
      </HStack>
    </Text>
  )
}

Unit

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

384.4 km

import { FormatNumber, Text } from "@chakra-ui/react"

export const FormatNumberWithUnit = () => {
  return (
    <Text textStyle="lg">
      <FormatNumber value={384.4} style="unit" unit="kilometer" />
    </Text>
  )
}

Compact Notation

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

1.5M

import { FormatNumber, Text } from "@chakra-ui/react"

export const FormatNumberWithCompact = () => {
  return (
    <Text textStyle="lg">
      <FormatNumber value={1500000} notation="compact" compactDisplay="short" />
    </Text>
  )
}

Props

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

Prop	Default	Type
`value` *		`number` The number to format

For

FormatByte