format

Fragment reference format

tags

ui

Three formatting components backed by browser-native Intl APIs — no language packs required.

• format-number — decimals, percentages, currencies via Intl.NumberFormat
• format-date — dates, times, weekdays via Intl.DateTimeFormat
• format-bytes — byte/bit sizes with configurable verbosity

Attributes — format-number

Name	Type	Default	Description
value	number	0	Number to format.
type	decimal | currency | percent	decimal	Formatting style.
currency	string	USD	ISO 4217 currency code. Used when type="currency".
currency-display	symbol | narrowSymbol | code | name	symbol	How to display the currency.
minimum-fraction-digits	number	-	Minimum decimal places (0–100).
maximum-fraction-digits	number	-	Maximum decimal places (0–100).
without-grouping	boolean	false	Disables thousands separator.
lang	string	browser default	BCP 47 locale tag (e.g. en-US, de).

Attributes — format-date

Name	Type	Default	Description
date	string | Date	new Date()	ISO 8601 date string to format.
weekday	narrow | short | long	-	Display format for the weekday.
year	numeric | 2-digit	-	Display format for the year.
month	numeric | 2-digit | narrow | short | long	-	Display format for the month.
day	numeric | 2-digit	-	Display format for the day.
hour	numeric | 2-digit	-	Display format for the hour.
minute	numeric | 2-digit	-	Display format for the minute.
second	numeric | 2-digit	-	Display format for the second.
hour-format	auto | 12 | 24	auto	12- or 24-hour clock.
time-zone	string	-	IANA time zone name (e.g. America/New_York).
lang	string	browser default	BCP 47 locale tag (e.g. en-US, fr).

Attributes — format-bytes

Name	Type	Default	Description
value	number	0	Value to format.
unit	byte | bit	byte	Display as bytes or bits.
display	long | short | narrow	short	Label verbosity: “100 bytes”, “100 B”, “100B”.
lang	string	browser default	BCP 47 locale tag for number formatting.

Always use ISO 8601 for dates. Avoid 03/04/2026 — browsers may interpret month/day order differently.

Numeric formatting with decimal, percent, and currency

puguiformat wa-format-number

format-number(value=12345.67)
format-number(value=0.753 type="percent")
format-number(value=2000 type="currency" currency="USD" lang="en-US")

Date formatting with long month, weekday, and time

puguiformat wa-format-date

format-date(date="2026-04-30T12:00:00Z" month="long" day="numeric" year="numeric")
format-date(date="2026-04-30T12:00:00Z" weekday="long")
format-date(date="2026-04-30T14:30:00Z" hour="numeric" minute="numeric" hour-format="12")

Byte size formatting with display verbosity variants

puguiformat wa-format-bytes

format-bytes(value=512)
format-bytes(value=1572864 display="long")
format-bytes(value=1572864 display="short")
format-bytes(value=1572864 display="narrow")