NumberText
Typesets a finite number with locale-aware grouping, precision, and quieter fractional digits and units.@gemologic/sheen · typographyPlayground
This example has no scalar controls. Its validated source remains interactive below.
$1,250.00
<NumberText value={1250} format={{ style: "currency", currency: "USD", minimumFractionDigits: 2, maximumFractionDigits: 2 }} />Variant matrix
Account balance
$1,250.00
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/NumberText.tsx- Tokens
--sheen-color-fg-muted
Accessibility
Role: inline textKeyboard: No component-owned keysDo
- Use the same format for the same metric throughout the application.
- Name units and currency explicitly.
- Use raw values for sorting and calculations.
Do not
- Do not preformat or parse localized strings.
- Do not pass non-finite values; render an explicit missing-value state instead.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
value * | number | — | Finite numeric value. Percent formats accept a fraction: 0.65 means 65 percent. |
format | Intl.NumberFormatOptions | — | Intl.NumberFormat options for explicit precision, currency, units, or compact notation. |