---
schema_version: "1"
id: fe9fea74c91e4b4788a02e59876c4764ca9e592b4a3a2ea2677445857dac6372
title: Formatted Number
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/formattedNumber/lightning-formatted-number.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-formatted-number.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 4f8145aacd5644641d7bd406f80bbd1fb17046fdb3530969db540f3b13034a30
products:
  - Lightning Component Reference
---

# Formatted Number

**`lightning-formatted-number`**

Displays formatted numbers for decimals, currency, and percentages.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="formattedNumber" model="lwc" namespace="lightning"}


:::::

:::::tab

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](#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.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-number value="1000.0" minimum-significant-digits="5">
    </lightning-formatted-number>
</template>
```
<!-- prettier-ignore-end -->

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`.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-number value="1234.5678"> </lightning-formatted-number>
</template>
```
<!-- prettier-ignore-end -->

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

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-number value="1234.5678" minimum-fraction-digits="4">
    </lightning-formatted-number>
</template>
```
<!-- prettier-ignore-end -->

## Work With Currencies

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

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-number
        value="5000"
        format-style="currency"
        currency-code="USD"
    >
    </lightning-formatted-number>
</template>
```
<!-- prettier-ignore-end -->

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.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-number
        value="4000"
        format-style="currency"
        currency-code="JPY"
        minimum-fraction-digits="0"
    >
    </lightning-formatted-number>
</template>
```
<!-- prettier-ignore-end -->

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

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-number
        value="500"
        format-style="currency"
        currency-code="KWD"
        minimum-fraction-digits="3"
    >
    </lightning-formatted-number>
</template>
```
<!-- prettier-ignore-end -->

## Work With Percentages

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%.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-number value="0.503" format-style="percent">
    </lightning-formatted-number>
</template>
```
<!-- prettier-ignore-end -->

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

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-number
        value="0.503"
        format-style="percent"
        maximum-fraction-digits="1"
    >
    </lightning-formatted-number>
</template>
```
<!-- prettier-ignore-end -->

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.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-number value="0.503" format-style="percent-fixed">
    </lightning-formatted-number>
</template>
```
<!-- prettier-ignore-end -->

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

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-number
        value="0.503"
        format-style="percent-fixed"
        maximum-fraction-digits="3"
    >
    </lightning-formatted-number>
</template>
```
<!-- prettier-ignore-end -->

## Work with Large Numbers

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

<!-- prettier-ignore-start -->
```html
<p>Balance</p>
<lightning-formatted-number
    format-style="currency"
    currency-code="USD"
    value={balance}
></lightning-formatted-number>
```
<!-- prettier-ignore-end -->

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.

```javascript
// Don't do this
// Large numbers result in precision loss
balance = 123456789012345678;
```

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

```javascript
// Do this instead
// Specify a large number using a string
balance = "123456789012345678";
```

## Usage Considerations

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)](https://help.salesforce.com/articleView?id=admin_supported_locales.htm").

The `format-style` attribute is called the `style` attribute in the Aura version of this component.
See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components).

## LWC Recipes

The [LWC Recipes GitHub repository](https://github.com/trailheadapps/lwc-recipes) 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.

## See Also

[_Object Reference for the Salesforce Platform_: Field Types](https://developer.salesforce.com/docs/atlas.en-us.object_reference.meta/object_reference/field_types.htm)


:::::

:::::tab
::component-specification{component="formattedNumber" model="lwc" namespace="lightning"}

:::::

::::::