Format Number
Used to format numbers to a specific locale and options
AI TipWant to skip the docs? Use the MCP Server
1,450.45
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%
Currency
Use the style=currency prop to change the number format to currency.
$1,234.45
Locale
Wrap the FormatNumber component within the LocaleProvider to change the
locale.
de-DE
1.450,45zh-CN
1,450.45Unit
Use the style=unit prop to change the number format to unit.
384.4 km
Compact Notation
Use the notation=compact prop to change the number format to compact notation.
1.5M
Props
The FormatNumber component supports all Intl.NumberFormat options in
addition to the following props:
| Prop | Default | Type |
|---|---|---|
value * | numberThe number to format |