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">
2    <label class="uiLabel-left uiLabel">
3        <span>Amount</span>
4    </label>
5    <input class="field" 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>

1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18	 setOutput : function(component, event, helper) {
19		var el = component.find("msg");
20	    $A.util.removeClass(el.getElement(), 'hide');
21	    	
22        var amount = component.find("amount").get("v.value");
23        var oCurrency = component.find("oCurrency");
24        oCurrency.set("v.value", amount);
25	 }
26})

Attributes

Events