NumberFormatter

Format numbers with thousands/decimal separators, prefixes, and suffixes. Displays formatted numbers without input functionality.

Import

import { NumberFormatter } from '@tidbcloud/uikit'

Basic Usage

import { NumberFormatter } from '@tidbcloud/uikit'
 
function Demo() {
  return <NumberFormatter prefix="$ " value={1000000} thousandSeparator />
}
// Output: $ 1,000,000

Prefix and Suffix

import { NumberFormatter } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <>
      <div>
        With prefix: <NumberFormatter prefix="$ " value={100} />
      </div>
      <div>
        With suffix: <NumberFormatter value={100} suffix=" RUB" />
      </div>
    </>
  )
}

Thousands Separator

import { NumberFormatter } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <>
      <div>
        Default separator: <NumberFormatter thousandSeparator value={1000000} />
      </div>
      <div>
        Custom separator: <NumberFormatter thousandSeparator="." decimalSeparator="," value={1000000} />
      </div>
    </>
  )
}

Decimal Scale

import { NumberFormatter } from '@tidbcloud/uikit'
 
function Demo() {
  return <NumberFormatter value={5 / 3} decimalScale={2} />
}
// Output: 1.67

Key Props

Prop	Type	Description
`value`	`string \| number`	Value to format
`prefix`	`string`	String added before value
`suffix`	`string`	String added after value
`thousandSeparator`	`string \| boolean`	Character to separate thousands
`decimalSeparator`	`string`	Character for decimal separator
`decimalScale`	`number`	Number of decimal places
`fixedDecimalScale`	`boolean`	Always show fixed decimal places
`allowNegative`	`boolean`	Allow negative values
`thousandsGroupStyle`	`'thousand' \| 'lakh' \| 'wan' \| 'none'`	Grouping style

Notification Numberinput