Number Value

Usage

NumberValue is a formatting primitive. It takes one value and renders the string Intl.NumberFormat would produce for it, via @internationalized/number, in a span that carries tabular-nums. The convenience props — style, currency, notation, signDisplay and the fraction-digit pair — are the options you reach for most; formatOptions opens the rest.

It does not animate. Rolling digits belong to headline display values, where the movement is the point; here it would fight the component's job and break the column alignment that tabular figures exist to give you.

Anatomy

Import the NumberValue component and access all parts using dot notation.

import {NumberValue} from "@blakeui/pro-react";

<NumberValue value={0}>
  <NumberValue.Prefix />
  <NumberValue.Suffix />
</NumberValue>;

Both parts are optional and the root renders the formatted value on its own. Order in the markup does not matter — the root picks the prefix and the suffix out of its children and always places them either side of the value.

Compact

Currency

The currency code chooses the symbol and the number of decimals. Yen has no minor unit, so JPY rounds to whole yen while the other three pad to two places.

Format Options

formatOptions takes the full Intl.NumberFormatOptions surface plus numberingSystem. It replaces the convenience props rather than merging with them, so anything you still want — style, currency, notation — has to be named inside the object.

Percent

Sign Display

never drops the sign rather than the magnitude, so −42 renders as 42. Use it only where the direction is already carried by something else, such as a colour or an adjacent arrow.

Tabular Nums

Every root gets font-variant-numeric: tabular-nums from .number-value, so digits occupy equal width and a stacked column lines up on the decimal point. A render-function child is the one way out of it: that form renders your element instead of the root, so add number-value to your own className if the value still needs to align.

With Prefix Suffix

CSS Classes

Base Class

• .number-value — The root span. Its only declaration is font-variant-numeric: tabular-nums. There is no fill, no stroke, no type scale and no colour: the value inherits its typography from whatever it sits in, which is what lets the same component read as a 12px table cell and a 32px headline without a size prop.

Element Classes

None of the three carries a declaration. They are structural hooks — stable targets for your own stylesheet, and the reason each part is a separate element rather than a text node.

• .number-value__value — The formatted number. Always present, always the middle child.
• .number-value__prefix — Text before the value. Rendered only when a NumberValue.Prefix is passed.
• .number-value__suffix — Text after the value. Rendered only when a NumberValue.Suffix is passed.

Data Attributes

• [data-slot="number-value"], [data-slot="number-value-value"], [data-slot="number-value-prefix"], [data-slot="number-value-suffix"] — One per part, so any of them can be targeted without depending on its BEM class.

Both sets of hooks are absent under a render-function child, which returns your element in place of the whole tree.

API Reference

NumberValue

The root. Formats value for the resolved locale and renders it in a span.

Also accepts every native span attribute except children and style.

NumberValue.Prefix

Text before the value. A span, rendered inside the root ahead of .number-value__value.

Also accepts every native span attribute.

NumberValue.Suffix

Text after the value. A span, rendered inside the root behind .number-value__value.

Also accepts every native span attribute.