ui:inputCurrency | Lightning Components Developer Guide

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. 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 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');

This example binds the value of a ui:inputCurrency component to ui:outputCurrency.

1<aura:component>
2    <aura:attribute name="myCurrency" type="integer" default="50"/>
3    <ui:inputCurrency aura:id="amount" label="Amount" class="field" value="{!v.myCurrency}" updateOn="keyup"/>
4 You entered: <ui:outputCurrency value="{!v.myCurrency}"/>
5</aura:component>

Attributes

Attribute Name	Attribute Type	Description
`body`	Component[]	The body of the component. In markup, this is everything in the body of the tag.
`class`	String	A CSS style to be attached to the component. This style is added in addition to base styles output by the component.
`disabled`	Boolean	Specifies whether the component should be displayed in a disabled state. Default value is "false".
`errors`	List	The list of errors to be displayed.
`format`	String	The format of the number. For example, format=“.00” displays the number followed by two decimal places. If not specified, the Locale default format will be used.
`label`	String	The text of the label component
`labelClass`	String	The CSS class of the label component
`maxlength`	Integer	The maximum number of characters that can be typed into the input field. Corresponds to the maxlength attribute of the rendered HTML input element.
`placeholder`	String	Text that is displayed when the field is empty, to prompt the user for a valid entry.
`required`	Boolean	Specifies whether the input is required. Default value is "false".
`requiredIndicatorClass`	String	The CSS class of the required indicator component
`size`	Integer	The width of the input field, in characters. Corresponds to the size attribute of the rendered HTML input element.
`updateOn`	String	Updates the component's value binding if the updateOn attribute is set to the handled event. Default value is "change".
`value`	Decimal	The input value of the number.

Events

Event Name	Event Type	Description
`dblclick`	COMPONENT	The event fired when the user double-clicks the component.
`mouseover`	COMPONENT	The event fired when the user moves the mouse pointer over the component.
`mouseout`	COMPONENT	The event fired when the user moves the mouse pointer away from the component.
`mouseup`	COMPONENT	The event fired when the user releases the mouse button over the component.
`mousemove`	COMPONENT	The event fired when the user moves the mouse pointer over the component.
`click`	COMPONENT	The event fired when the user clicks on the component.
`mousedown`	COMPONENT	The event fired when the user clicks a mouse button over the component.
`select`	COMPONENT	The event fired when the user selects some text.
`blur`	COMPONENT	The event fired when the user moves off from the component.
`focus`	COMPONENT	The event fired when the user focuses on the component.
`keypress`	COMPONENT	The event fired when the user presses or holds down a keyboard key on the component.
`keyup`	COMPONENT	The event fired when the user releases a keyboard key on the component.
`keydown`	COMPONENT	The event fired when the user presses a keyboard key on the component.
`cut`	COMPONENT	The event fired when the user cuts content to the clipboard.
`onError`	COMPONENT	The event fired when there are any validation errors on the component.
`onClearErrors`	COMPONENT	The event fired when any validation errors should be cleared.
`change`	COMPONENT	The event fired when the user changes the content of the input.
`copy`	COMPONENT	The event fired when the user copies content to the clipboard.
`paste`	COMPONENT	The event fired when the user pastes content from the clipboard.