lightning:formattedNumber (Beta)

Displays formatted numbers for decimals, currency, and percentages.

A lightning:formattedNumber component displays formatted numbers for decimals, currency, and percentages. The locale set in the app's user preferences determines how numbers are formatted.

The component has several attributes that specify how number formatting is handled in your app. Among these attributes are minimumSignificantDigits and maximumSignificantDigits. Significant digits refer the accuracy of a number. For example, 1000 has one significant digit, but 1000.0 has five significant digits.

In this example the formatted number displays as $5,000.00.

<aura:component>
    <lightning:formattedNumber value="5000" style="currency" currency="USD" />
</aura:component>

In this example the formatted number displays as 50%.

<aura:component>
    <lightning:formattedNumber value="0.5" style="percent" />
</aura:component>
Usage Considerations

This component provides the following fallback behavior in Apple Safari 10 and below.

  • If style is set to currency, providing a currencyCode value that’s different from the locale displays the currency code instead of the symbol. The following example displays EUR12.34 in fallback mode and €12.34 otherwise.
    <lightning:formattedNumber value="12.34" style="currency" 
     currencyCode="EUR"/>
  • currencyDisplayAs supports symbol only. The following example displays $12.34 in fallback mode only if currencyCode matches the user’s locale currency and USD12.34 otherwise.
    <lightning:formattedNumber value="12.34" style="currency" 
     currencyCode="USD" currencyDisplayAs="symbol"/>

Attributes

Attribute Name Attribute Type Description Required?
body Component[] The body of the component. In markup, this is everything in the body of the tag.
currencyCode String Only used if style='currency', this attribute determines which currency is displayed. Possible values are the ISO 4217 currency codes, such as 'USD' for the US dollar.
currencyDisplayAs String Determines how currency is displayed. Possible values are symbol, code, and name. This value defaults to symbol.
maximumFractionDigits Integer The maximum number of fraction digits that are allowed.
maximumSignificantDigits Integer The maximum number of significant digits that are allowed. Possible values are from 1 to 21.
minimumFractionDigits Integer The minimum number of fraction digits that are required.
minimumIntegerDigits Integer The minimum number of integer digits that are required. Possible values are from 1 to 21.
minimumSignificantDigits Integer The minimum number of significant digits that are required. Possible values are from 1 to 21.
style String The number formatting style to use. Possible values are decimal, currency, and percent. This value defaults to decimal.
value Decimal The value to be formatted. Yes