Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

NumberFormatter

Format number with thousands/decimal separators and suffix/prefix

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

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

$ 1,000,000
import { NumberFormatter } from '@mantine/core';

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

Prefix and suffix

Set prefix and suffix props to add 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 thousandSeparator prop to separate thousands with a character. You can control grouping logic with thousandsGroupStyle, it 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

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} />;
}

Previous

Kbd

Next

Spoiler

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people