Format Number

<cs-format-number>

Stable

Since 0.1

Formats a number for display using the specified locale and options, including currency, percent, and unit styles. Powered by the Intl.NumberFormat API.

<div class="format-number-overview">
  <cs-format-number value="1000"></cs-format-number>

  <cs-divider></cs-divider>

  <cs-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></cs-input>
</div>

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

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

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

Examples

Percentage

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

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

Localization

Use the lang attribute to set the number formatting locale.

English: 

German: 

Russian: 

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

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 number is formatted correctly for the target locale.

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

API

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.

npm

Self-Hosted

React

import '@cruglobal/cornerstone-components/components/format-number/format-number.js';

import './cornerstone/components/format-number/format-number.js';

import CsFormatNumber from '@cruglobal/cornerstone-components/react/format-number/index.js';

Attributes & Properties

Learn more about attributes and properties.

Property	Attribute	Description	Type	Default	Reflects
`currency`	`currency`	The ISO 4217 currency code to use when formatting.	`string`	`'USD'`	—
`currencyDisplay`	`currency-display`	How to display the currency.	`'symbol' \| 'narrowSymbol' \| 'code' \| 'name'`	`'symbol'`	—
`maximumFractionDigits`	`maximum-fraction-digits`	The maximum number of fraction digits to use. Possible values are 0-100.	`number`	—	—
`maximumSignificantDigits`	`maximum-significant-digits`	The maximum number of significant 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-100.	`number`	—	—
`minimumIntegerDigits`	`minimum-integer-digits`	The minimum number of integer digits to use. Possible values are 1-21.	`number`	—	—
`minimumSignificantDigits`	`minimum-significant-digits`	The minimum number of significant digits to use. Possible values are 1-21.	`number`	—	—
`type`	`type`	The formatting style to use.	`'currency' \| 'decimal' \| 'percent'`	`'decimal'`	—
`value`	`value`	The number to format.	`number`	`0`	—
`withoutGrouping`	`without-grouping`	Turns off grouping separators.	`boolean`	`false`	—

Quick Links

Recent Searches