Input Currency (Deprecated)

We recommend using Lightning Web Components whenever possible. When migrating to Lightning Web Components, use lightning-input with number type and currency formatter.

For more information, see Aura Components in the ui Namespace Are Deprecated.

A ui:inputCurrency component represents an input field for a number as a currency, which is rendered as an HTML input element of type text. It uses JavaScript’s Number type MAX_SAFE_INTEGER and MIN_SAFE_INTEGER precision to determine the supported number of digits, which is about 16 digits. Numbers outside of the precision can get truncated or rounded.

To apply Lightning Design System styling, we recommend that you use lightning:input with type="number" and formatter="currency" instead of ui:inputCurrency. To render the output from a ui:inputCurrency component, use the ui:outputCurrency component.

This is a basic set up of a ui:inputCurrency component, which renders an input field with the value $50.00 when the browser’s currency locale is $.

1<ui:inputCurrency aura:id="amount" label="Amount" class="field" value="50" />

This example results in the following HTML.

1<div class="uiInput uiInput--default uiInput--input">
2  <label class="uiLabel-left form-element__label uiLabel">
3    <span>Amount</span>
4  </label>
5  <input class="field input" max="99999999999999" step="1" type="text" min="-99999999999999" />
6</div>

To override the browser’s locale, set the new format on the v.format attribute of the ui:inputCurrency component. This example renders an input field with the value £50.00.

1var curr = component.find("amount");
2curr.set("v.format", "£#,###.00");