Typography
Numeral
Locale-aware number formatting powered by Intl.NumberFormat.
Numeral formats a number with Intl.NumberFormat. It reads the active locale from React Aria's
I18nProvider and accepts the relevant typography props from Text.
Format
Numeral uses decimal formatting by default. It infers currency or unit formatting when currency
or unit is present. Set format to 'percent' or 'decimal' for those formats. Set it to
'currency' or 'unit' when you want that formatting explicit in the component call.
Compact notation
Set abbreviate for compact notation such as 12K. Pass "long" for a long display such as
12 thousand.
Precision
Pass a number for fixed fraction digits or a [min, max] tuple for a range. Use formatOptions for
other Intl.NumberFormat options.
Formatting rules
Numeral throws when:
- you provide both
currencyandunit. - you use
format="currency"without acurrencycode. - you use
format="unit"without aunitvalue. precisionis not a non-negative integer or a valid[min, max]tuple.
Typography and alignment
Numerals use tabular figures and end alignment by default, so values remain readable in a column.
Set fontVariantNumeric, textAlign, or inherited Text typography props when the context needs a
different treatment.
API
NumeralProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.