Luke UI
GitHub repository

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.

Numeral: Basic
Loading Numeral: Basic example

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.

Numeral: Format
Loading Numeral: Format example

Compact notation

Set abbreviate for compact notation such as 12K. Pass "long" for a long display such as 12 thousand.

Numeral: Compact notation
Loading Numeral: Compact notation example

Precision

Pass a number for fixed fraction digits or a [min, max] tuple for a range. Use formatOptions for other Intl.NumberFormat options.

Numeral: Precision
Loading Numeral: Precision example

Formatting rules

Numeral throws when:

  • you provide both currency and unit.
  • you use format="currency" without a currency code.
  • you use format="unit" without a unit value.
  • precision is 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.

Prop

Type