NumberFormatter

Format number with thousands/decimal separators and suffix/prefix

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/core

Usage

Use NumberFormatter to format numbers. It supports the same formatting-related props as the NumberInput component.

$ 1,000,000

import { NumberFormatter } from '@mantine/core';

function Demo() {
  return <NumberFormatter prefix="$ " value={1000000} thousandSeparator />;
}

Prefix and suffix

Set the prefix and suffix props to add a given string to the start or end of the value:

With prefix: $ 100

With suffix: 100 RUB

import { NumberFormatter } from '@mantine/core';

function Demo() {
  return (
    <>
      <div>
        With prefix: <NumberFormatter prefix="$ " value={100} />
      </div>
      <div>
        With suffix: <NumberFormatter value={100} suffix=" RUB" />
      </div>
    </>
  );
}

Thousands separator

Set the thousandSeparator prop to separate thousands with a character. You can control the grouping logic with thousandsGroupStyle, which accepts: thousand, lakh, wan, none values.

With default separator: 1,000,000

With custom separator: 1.000.000

import { NumberFormatter } from '@mantine/core';

function Demo() {
  return (
    <>
      <div>
        With default separator: <NumberFormatter thousandSeparator value={1000000} />
      </div>
      <div>
        With custom separator:{' '}
        <NumberFormatter thousandSeparator="." decimalSeparator="," value={1000000} />
      </div>
    </>
  );
}

Decimal scale

The decimalScale prop controls the number of allowed decimal places:

1.67

import { NumberFormatter } from '@mantine/core';

function Demo() {
  return <NumberFormatter value={5 / 3} decimalScale={2} />;
}

Kbd

OverflowList