Format Number

<mo-format-number> | MOFormatNumber

Since 1.0

stable

Formats a number according to the user’s locale.

Localization is handled by the browser’s Intl.NumberFormat API. No language packs are required.

<div class="format-number-overview">
  <mo-format-number value="1000"></mo-format-number>
  <br /><br />
  <mo-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></mo-input>
</div>

<script>
  const container = document.querySelector('.format-number-overview');
  const formatter = container.querySelector('mo-format-number');
  const input = container.querySelector('mo-input');

  input.addEventListener('mo-input', () => (formatter.value = input.value || 0));
</script>

import { useState } from 'react';
import { MOFormatNumber, MOInput } from '@metsooutotec/modes-web-components/dist/react';

const App = () => {
  const [value, setValue] = useState(1000);

  return (
    <>
      <MOFormatNumber value={value} />
      <br />
      <br />
      <MOInput
        type="number"
        value={value}
        label="Number to Format"
        style={{ maxWidth: '180px' }}
        onMoInput={event => setValue(event.target.value)}
      />
    </>
  );
};

Examples

Percentages

To get the value as a percent, set the type attribute to percent.

<mo-format-number type="percent" value="0"></mo-format-number><br />
<mo-format-number type="percent" value="0.25"></mo-format-number><br />
<mo-format-number type="percent" value="0.50"></mo-format-number><br />
<mo-format-number type="percent" value="0.75"></mo-format-number><br />
<mo-format-number type="percent" value="1"></mo-format-number>

import { MOFormatNumber } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    <MOFormatNumber type="percent" value={0} />
    <br />
    <MOFormatNumber type="percent" value={0.25} />
    <br />
    <MOFormatNumber type="percent" value={0.5} />
    <br />
    <MOFormatNumber type="percent" value={0.75} />
    <br />
    <MOFormatNumber type="percent" value={1} />
  </>
);

Localization

Use the lang attribute to set the number formatting locale.

English:
German:
Russian:

English: <mo-format-number value="2000" lang="en" minimum-fraction-digits="2"></mo-format-number><br />
German: <mo-format-number value="2000" lang="de" minimum-fraction-digits="2"></mo-format-number><br />
Russian: <mo-format-number value="2000" lang="ru" minimum-fraction-digits="2"></mo-format-number>

import { MOFormatNumber } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    English: <MOFormatNumber value="2000" lang="en" minimum-fraction-digits="2" />
    <br />
    German: <MOFormatNumber value="2000" lang="de" minimum-fraction-digits="2" />
    <br />
    Russian: <MOFormatNumber value="2000" lang="ru" minimum-fraction-digits="2" />
  </>
);

Currency

To format a number as a monetary value, set the type attribute to currency and set the currency attribute to the desired ISO 4217 currency code. You should also specify lang to ensure the the number is formatted correctly for the target locale.

<mo-format-number type="currency" currency="USD" value="2000" lang="en-US"></mo-format-number><br />
<mo-format-number type="currency" currency="GBP" value="2000" lang="en-GB"></mo-format-number><br />
<mo-format-number type="currency" currency="EUR" value="2000" lang="de"></mo-format-number><br />
<mo-format-number type="currency" currency="RUB" value="2000" lang="ru"></mo-format-number><br />
<mo-format-number type="currency" currency="CNY" value="2000" lang="zh-cn"></mo-format-number>

import { MOFormatNumber } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    <MOFormatNumber type="currency" currency="USD" value="2000" lang="en-US" />
    <br />
    <MOFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" />
    <br />
    <MOFormatNumber type="currency" currency="EUR" value="2000" lang="de" />
    <br />
    <MOFormatNumber type="currency" currency="RUB" value="2000" lang="ru" />
    <br />
    <MOFormatNumber type="currency" currency="CNY" value="2000" lang="zh-cn" />
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler

React

Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/format-number/format-number.js';

To import this component as a React component:

import MOFormatNumber from '@metsooutotec/modes-web-components/dist/react/format-number/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/format-number/format-number.js"></script>

Properties

Name	Description	Type	Default
`value`	The number to format.	`number`	`0`
`lang`	The locale to use when formatting the number.	`string`	-
`type`	The formatting style to use.	`'currency' \| 'decimal' \| 'percent'`	`'decimal'`
`noGrouping` `no-grouping`	Turns off grouping separators.	`boolean`	`false`
`currency`	The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`.	`string`	`'USD'`
`currencyDisplay` `currency-display`	How to display the currency.	`'symbol' \| 'narrowSymbol' \| 'code' \| 'name'`	`'symbol'`
`minimumIntegerDigits` `minimum-integer-digits`	The minimum number of integer digits to use. Possible values are 1 – 21.	`number`	-
`minimumFractionDigits` `minimum-fraction-digits`	The minimum number of fraction digits to use. Possible values are 0 – 20.	`number`	-
`maximumFractionDigits` `maximum-fraction-digits`	The maximum number of fraction digits to use. Possible values are 0 – 20.	`number`	-
`minimumSignificantDigits` `minimum-significant-digits`	The minimum number of significant digits to use. Possible values are 1 – 21.	`number`	-
`maximumSignificantDigits` `maximum-significant-digits`	The maximum number of significant digits to use,. Possible values are 1 – 21.	`number`	-
`updateComplete`	A read-only promise that resolves when the component has finished updating.