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
import { FormatNumber, Text } from "@chakra-ui/react" const Demo = () => { 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" const Demo = () => { 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" const Demo = () => { 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,45zh-CN
1,450.45import { FormatNumber, HStack, LocaleProvider, Text } from "@chakra-ui/react" const Demo = () => { 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" const Demo = () => { 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" const Demo = () => { 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 * | numberThe number to format |