Formatted Number

A lightning-formatted-number component shows formatted numbers for decimals, currency, and percentages. Use format-style to specify the number style. This component uses the Intl.NumberFormat JavaScript object to format numerical values.

The locale set in your Salesforce user settings determines where to place spaces, commas, and periods in numbers, and the currency used by default. See the Usage Considerations section for limitations in some locales.

The component has several attributes to specify how to format numbers. Among these attributes are minimum-significant-digits and maximum-significant-digits. Significant digits refer to the accuracy of a number. For example, 1000 has one significant digit, but 1000.0 has five significant digits. By default, lightning-formatted-number shows the value 1000.0 as 1000. To include the decimal and trailing zero, set minimum-significant-digits to 5.

1<template>
2    <lightning-formatted-number value="1000.0" minimum-significant-digits="5">
3    </lightning-formatted-number>
4</template>

Customize the number of decimal places by using minimum-fraction-digits and maximum-fraction-digits.

Decimal numbers default to 3 decimal places. This example returns 1234.568.

1<template>
2    <lightning-formatted-number value="1234.5678"> </lightning-formatted-number>
3</template>

To include all four digits in the decimal place, add the attribute minimum-fraction-digits="4".

1<template>
2    <lightning-formatted-number value="1234.5678" minimum-fraction-digits="4">
3    </lightning-formatted-number>
4</template>

Currency numbers default to 2 decimal places. In this example, the formatted number is $5,000.00.

1<template>
2    <lightning-formatted-number
3        value="5000"
4        format-style="currency"
5        currency-code="USD"
6    >
7    </lightning-formatted-number>
8</template>

The currency-display-as attribute changes the currency display to use the symbol, code, or name of the currency.

To change the number of decimal places, use one or both of the minimum-fraction-digits and maximum-fraction-digits attributes.

This example renders ¥4,000 by using minimum-fraction-digits="0" to suppress decimals.

1<template>
2    <lightning-formatted-number
3        value="4000"
4        format-style="currency"
5        currency-code="JPY"
6        minimum-fraction-digits="0"
7    >
8    </lightning-formatted-number>
9</template>

This example renders KWD 500.000 by using minimum-fraction-digits to include three decimal places.

1<template>
2    <lightning-formatted-number
3        value="500"
4        format-style="currency"
5        currency-code="KWD"
6        minimum-fraction-digits="3"
7    >
8    </lightning-formatted-number>
9</template>

Specify format-style="percent" to format the number as a percent value. Percentages default to 0 decimal places, with rounding. In this example, the formatted number is 50%.

1<template>
2    <lightning-formatted-number value="0.503" format-style="percent">
3    </lightning-formatted-number>
4</template>

To preserve the decimal points, use the maximum-fraction-digits attribute. In this example, the formatted number is 50.3%.

1<template>
2    <lightning-formatted-number
3        value="0.503"
4        format-style="percent"
5        maximum-fraction-digits="1"
6    >
7    </lightning-formatted-number>
8</template>

To display the value as-is without multiplying it by 100, specify format-style="percent-fixed". In this example, the formatted number displays as 1% because decimal places aren’t included by default and the value is rounded.

1<template>
2    <lightning-formatted-number value="0.503" format-style="percent-fixed">
3    </lightning-formatted-number>
4</template>

Add the attribute maximum-fraction-digits="3" to set the percentage as 0.503%.

1<template>
2    <lightning-formatted-number
3        value="0.503"
4        format-style="percent-fixed"
5        maximum-fraction-digits="3"
6    >
7    </lightning-formatted-number>
8</template>

To prevent precision loss when working with large numbers with more than 15 or 16 digits, specify the numbers as a string.

1<p>Balance</p>
2<lightning-formatted-number
3    format-style="currency"
4    currency-code="USD"
5    value={balance}
6></lightning-formatted-number>

When you specify the number in JavaScript without using a string, the component renders $123,456,789,012,345,680.00, which is a loss in precision.

1// Don't do this
2// Large numbers result in precision loss
3balance = 123456789012345678;

To prevent precision loss for large numbers, consider using a string instead.

1// Do this instead
2// Specify a large number using a string
3balance = "123456789012345678";

The locale set in your Salesforce user preferences determines how numbers are formatted. Some locales such as the Arabic (Lebanon) and Bangla (Bangladesh) locales also specify a numeral system other than the Hindu-Arabic numerals 0-9. The org permission “Show Hindu-Arabic Numbers” is intended to override a locale’s default numerals. However, lightning-formatted-number displays the locale’s default numerals even when this permission is enabled in your org. See Supported Number, Name, and Address Formats (ICU).

The format-style attribute is called the style attribute in the Aura version of this component. See Base Components: Aura Vs Lightning Web Components.

The LWC Recipes GitHub repository contains code examples for Lightning Web Components that you can test in an org.

For a recipe that uses lightning-formatted-date-time, see the c-misc-shared-javascript component.

Object Reference for the Salesforce Platform: Field Types