A React number display with locale-aware currency, percentage, and compact formatting.
Import the NumberValue component and access all parts using dot notation.
import {NumberValue} from "@heroui-pro/react";
<NumberValue>
<NumberValue.Prefix />
<NumberValue.Suffix />
</NumberValue>.number-value - Base inline-flex wrapper.number-value__prefix - Text before the formatted number.number-value__value - The formatted number.number-value__suffix - Text after the formatted numberThe root component. Formats and displays a number using locale-aware Intl.NumberFormat.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Required. The numeric value to format |
style | 'decimal' | 'currency' | 'percent' | 'unit' | 'decimal' | Formatting style |
currency | string | - | Currency code (e.g. "USD"). Required when style is "currency" |
unit | string | - | Unit type (e.g. "degree"). Required when style is "unit" |
notation | 'standard' | 'compact' | 'scientific' | 'engineering' | 'standard' | Notation style |
signDisplay | 'auto' | 'always' | 'exceptZero' | 'never' | - | Controls when the sign is displayed |
minimumFractionDigits | number | - | Minimum number of fraction digits |
maximumFractionDigits | number | - | Maximum number of fraction digits |
locale | string | - | Override the locale from the nearest I18nProvider |
formatOptions | NumberFormatOptions | - | Format options passed directly to NumberFormatter. Overrides individual convenience props |
children | ReactNode | ((formatted: string) => ReactNode) | - | Prefix/Suffix sub-components or a render function receiving the formatted string |
Also supports all native span HTML attributes except children and style.
Text displayed before the formatted number.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Prefix text |
Also supports all native span HTML attributes.
Text displayed after the formatted number.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Suffix text |
Also supports all native span HTML attributes.