Format
Format is used to format dates, numbers, and bytes according to a specific locale.
1.23 MB1,234,567.89
<VStack gap="0">
<Format.Byte value={1234567} />
<Format.Number value={1234567.89} />
</VStack>
Usage
import { Format } from "@yamada-ui/react"
import { Format } from "@/components/ui"
import { Format } from "@workspaces/ui"
<Format.Byte />
<Format.Number />
Dates
Format.DateTime internally uses Intl.DateTimeFormat.Changing the Locale
To change the locale, set a value for locale.
en-US
10/18/2025ja-JP
2025/10/18de-DE
18.10.2025fr-FR
18/10/2025zh-CN
2025/10/18<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">en-US</Text>
<Format.DateTime value={new Date()} locale="en-US" />
<Text fontWeight="semibold">ja-JP</Text>
<Format.DateTime value={new Date()} locale="ja-JP" />
<Text fontWeight="semibold">de-DE</Text>
<Format.DateTime value={new Date()} locale="de-DE" />
<Text fontWeight="semibold">fr-FR</Text>
<Format.DateTime value={new Date()} locale="fr-FR" />
<Text fontWeight="semibold">zh-CN</Text>
<Format.DateTime value={new Date()} locale="zh-CN" />
</Grid>
Converting to Year
To convert to year, set a value for year.
2025
<Format.DateTime value={new Date()} year="numeric" />
Converting to Month
To convert to month, set a value for month.
October
<Format.DateTime value={new Date()} month="long" />
Converting to Day
To convert to day, set a value for day.
18
<Format.DateTime value={new Date()} day="2-digit" />
Converting to Weekday
To convert to weekday, set a value for weekday.
Saturday
<Format.DateTime value={new Date()} weekday="long" />
Numbers
Format.Number internally uses Intl.NumberFormat.Changing the Locale
To change the locale, set a value for locale.
en-US
1,234,567.89ja-JP
1,234,567.89de-DE
1.234.567,89fr-FR
1 234 567,89zh-CN
1,234,567.89<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">en-US</Text>
<Format.Number value={1234567.89} locale="en-US" />
<Text fontWeight="semibold">ja-JP</Text>
<Format.Number value={1234567.89} locale="ja-JP" />
<Text fontWeight="semibold">de-DE</Text>
<Format.Number value={1234567.89} locale="de-DE" />
<Text fontWeight="semibold">fr-FR</Text>
<Format.Number value={1234567.89} locale="fr-FR" />
<Text fontWeight="semibold">zh-CN</Text>
<Format.Number value={1234567.89} locale="zh-CN" />
</Grid>
Converting to Currency
To convert to currency, set "currency" for style.
USD
$1,234,567.89EUR
1.234.567,89 €JPY
￥1,234,568<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">USD</Text>
<Format.Number
value={1234567.89}
style="currency"
currency="USD"
locale="en-US"
/>
<Text fontWeight="semibold">EUR</Text>
<Format.Number
value={1234567.89}
style="currency"
currency="EUR"
locale="de-DE"
/>
<Text fontWeight="semibold">JPY</Text>
<Format.Number
value={1234567.89}
style="currency"
currency="JPY"
locale="ja-JP"
/>
</Grid>
Converting to Units
To convert to units, set "unit" for style.
100 kg100 degrees Celsius100km/h
<VStack gap="sm">
<Format.Number value={100} style="unit" unit="kilogram" />
<Format.Number value={100} style="unit" unit="celsius" unitDisplay="long" />
<Format.Number
value={100}
style="unit"
unit="kilometer-per-hour"
unitDisplay="narrow"
/>
</VStack>
Converting to Percent
To convert to percent, set "percent" for style.
45%45.00%
<VStack gap="sm">
<Format.Number value={0.45} style="percent" />
<Format.Number value={0.45} style="percent" minimumFractionDigits={2} />
</VStack>
Converting Notation
To convert notation, set a value for notation.
1,234,567.891.235E61.235E61.2M
<VStack gap="sm">
<Format.Number value={1234567.89} notation="standard" />
<Format.Number value={1234567.89} notation="scientific" />
<Format.Number value={1234567.89} notation="engineering" />
<Format.Number value={1234567.89} notation="compact" />
</VStack>
Controlling Decimal Places
To control the number of decimal places, use minimumFractionDigits and maximumFractionDigits.
1,234.501,234.5671,234.0000
<VStack gap="sm">
<Format.Number
minimumFractionDigits={2}
maximumFractionDigits={2}
value={1234.5}
/>
<Format.Number
minimumFractionDigits={0}
maximumFractionDigits={3}
value={1234.567}
/>
<Format.Number
minimumFractionDigits={4}
maximumFractionDigits={4}
value={1234}
/>
</VStack>
Disabling Grouping
To disable grouping, set false for useGrouping.
1234567.89
<Format.Number value={1234567.89} useGrouping={false} />
Changing the Sign Display
To change the sign display, set a value for signDisplay.
+1,234.5-1,234.5
<VStack gap="sm">
<Format.Number value={1234.5} signDisplay="always" />
<Format.Number value={-1234.5} signDisplay="exceptZero" />
</VStack>
Bytes
Format.Byte internally uses Intl.NumberFormat.Automatic Unit Selection
Format.Byte automatically selects the most appropriate unit (byte, kB, MB, GB, TB) based on the byte value size.
512 byte1.02 kB1.05 MB1.07 GB1.1 TB
<VStack gap="sm">
<Format.Byte value={512} />
<Format.Byte value={1024} />
<Format.Byte value={1024 * 1024} />
<Format.Byte value={1024 * 1024 * 1024} />
<Format.Byte value={1024 * 1024 * 1024 * 1024} />
</VStack>
Changing the Locale
To change the locale, set a value for locale.
en-US
1.02 kilobytesja-JP
1.02 キロバイトde-DE
1,02 Kilobytefr-FR
1,02 kilooctetzh-CN
1.02千字节<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">en-US</Text>
<Format.Byte value={1024} locale="en-US" unitDisplay="long" />
<Text fontWeight="semibold">ja-JP</Text>
<Format.Byte value={1024} locale="ja-JP" unitDisplay="long" />
<Text fontWeight="semibold">de-DE</Text>
<Format.Byte value={1024} locale="de-DE" unitDisplay="long" />
<Text fontWeight="semibold">fr-FR</Text>
<Format.Byte value={1024} locale="fr-FR" unitDisplay="long" />
<Text fontWeight="semibold">zh-CN</Text>
<Format.Byte value={1024} locale="zh-CN" unitDisplay="long" />
</Grid>
Unit Format
To convert units, set unit to either "byte" or "bit". The default is "byte".
Bytes
1.02 kBBits
1.02 kb<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">Bytes</Text>
<Format.Byte value={1024} unit="byte" />
<Text fontWeight="semibold">Bits</Text>
<Format.Byte value={1024} unit="bit" />
</Grid>
Changing the Unit Display
To change the unit display, set a value for unitDisplay.
Short
1.02 kBNarrow
1.02kBLong
1.02 kilobytes<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">Short</Text>
<Format.Byte value={1024} unitDisplay="short" />
<Text fontWeight="semibold">Narrow</Text>
<Format.Byte value={1024} unitDisplay="narrow" />
<Text fontWeight="semibold">Long</Text>
<Format.Byte value={1024} unitDisplay="long" />
</Grid>
Set the Locale for the Entire Application
If you want to set the locale for the entire application, set the locale for the UIProvider.
import { UIProvider } from "@yamada-ui/react"
const App = () => {
return (
<UIProvider locale="en-US">
<Format.Byte value={1024} />
<Format.Number value={1234567.89} />
</UIProvider>
)
}