Components/Typography/NumberFormatter

NumberFormatter

Typography

Formats numbers with locale, currency, and precision.

Purely presentational — renders a formatted number in a <span>. Not an input. Use for metric cards, table cells, and stat displays.

Usage

import { NumberFormatter } from "nosible-ux"

export default function Example() {
  return <NumberFormatter value={1234567.89} prefix="$" decimalScale={2} />
}

Examples

Currency and percentage

Accessibility

aria-label on the span contains the full formatted value so screen readers announce the complete number rather than abbreviations.

Props

Name	Type	Default	Description
`decimalScale`	`number \| undefined`	`the value's natural decimal places (no forced rounding)`	Number of decimal places to show.
`decimalSeparator`	`string \| undefined`	`"."`	Character used as the decimal point.
`prefix`	`string \| undefined`	—	String prepended before the number (e.g. "$").
`suffix`	`string \| undefined`	—	String appended after the number (e.g. "%", " USD").
`thousandSeparator`	`string \| undefined`	`","`	Character used to separate thousands groups (e.g. ","). Pass `""` to disable grouping.
`value`	`number`	—	The number to format.

← All Components Getting Started →