ui:inputCurrency

A ui:inputCurrency component represents an input field for a number as a currency, which is rendered as an HTML input tag of type text. The browser's locale is used by default. 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 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');

This example retrieves the value of a ui:inputCurrency component and displays it using ui:outputCurrency.

1<aura:component>
2    <ui:inputCurrency aura:id="amount" label="Amount" class="field" value="50"/>
3    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
4
5 <div aura:id="msg" class="hide">
6  You entered: <ui:outputCurrency aura:id="oCurrency" value=""/>
7 </div>
8</aura:component>

1({
2	 setOutput : function(component, event, helper) {
3		var cmpMsg = component.find("msg");
4	    $A.util.removeClass(cmpMsg, 'hide');
5	    	
6        var amount = component.find("amount").get("v.value");
7        var oCurrency = component.find("oCurrency");
8        oCurrency.set("v.value", amount);
9	 }
10})

Attributes

Events