Typography@knitui/components

NumberFormatter

NumberFormatter is a pure display component that formats a number with thousands separators, decimal rounding, and optional prefix/suffix. It mirrors the Mantine NumberFormatter API and renders via the Text component, so all Text style props are supported.

WebiOSAndroid9 own props7 examples

Stories Source Tests Open in Storybook

import { NumberFormatter } from "@knitui/components";

Playground

Loading playground…

valueThe numeric value to format.

thousandSeparatorCharacter used to separate thousands groups. `true` uses a comma.

thousandsGroupStyleGrouping strategy: standard (3), Indian lakh (2/3), CJK wan (4), or none.

decimalScaleMaximum digits after the decimal point.

fixedDecimalScalePad trailing zeros so the decimal part always has `decimalScale` digits.

false

decimalSeparatorCharacter used as the decimal separator.

prefixString prepended to the formatted value (e.g. currency symbol).

suffixString appended to the formatted value (e.g. unit label).

allowNegativeWhen false, the absolute value is shown for negative inputs.

true

Playground

<NumberFormatter
  value={1234567.89}
  thousandSeparator
  decimalScale={2}
  fixedDecimalScale={false}
  prefix=""
  suffix=""
  thousandsGroupStyle="thousand"
  allowNegative
  decimalSeparator="."
/>

Examples

Currency Display

Currency prefix and suffix with two fixed decimal places.

Loading example…

Currency DisplaySource Storybook

Fixed Decimal Scale

Fixed decimal scale pads trailing zeros so the decimal column always aligns.

Loading example…

Fixed Decimal ScaleSource Storybook

Thousands Group Styles

Different thousands grouping styles — standard, Indian lakh, and CJK wan.

Loading example…

Thousands Group StylesSource Storybook

Negative Values

Negative values — with and without the allowNegative guard.

Loading example…

Negative ValuesSource Storybook

Custom Separators

Custom decimal and thousands separator characters for locale-specific formatting.

Loading example…

Custom SeparatorsSource Storybook

Edge Cases

Edge cases: empty value, non-finite input, and zero.

Loading example…

Edge CasesSource Storybook

Props

Prop	Type	Default	Description
`allowNegative`	`boolean \| undefined`	`true`	When false, the absolute value is shown for negative inputs.
`decimalScale`	`number \| undefined`	`Infinity`	Maximum digits after the decimal point.
`decimalSeparator`	`string \| undefined`	`'.'`	Character used as the decimal separator.
`disabled` system	`boolean \| undefined`	—	Specifies the disabled state of the text view for testing purposes.
`fixedDecimalScale`	`boolean \| undefined`	`false`	Pad trailing zeros so the decimal part always has `decimalScale` digits.
`prefix`	`string \| undefined`		String prepended to the formatted value (e.g. currency symbol).
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`suffix`	`string \| undefined`		String appended to the formatted value (e.g. unit label).
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`thousandSeparator`	`string \| boolean \| undefined`	`true`	Character used to separate thousands groups. `true` uses a comma.
`thousandsGroupStyle`	`"none" \| "thousand" \| "lakh" \| "wan" \| undefined` thousand · lakh · wan · none	`'none'`	Grouping strategy: standard (3), Indian lakh (2/3), CJK wan (4), or none.
`value`	`string \| number \| undefined`	`1234567.89`	The numeric value to format.

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiTextElement> \| undefined`

Plus 507 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.