ui:inputNumber | Lightning Components Developer’s Guide

A ui:inputNumber component represents a number input field, which is rendered as an HTML input tag of type text. This example shows a number field, which displays a value of 10.

1<aura:attribute name="num" type="integer" default="10"/>
2<ui:inputNumber aura:id="num" label="Age" value="{!v.num}"/>

The previous example results in the following HTML.

1<div class="uiInput uiInputNumber">
2<label class="uiLabel-left uiLabel">
3    <span>Age</span>
4</label>
5<input max="99999999999999" step="1" type="text" 
6        min="-99999999999999" class="uiInput uiInputNumber">
7</div>

To render the output from a ui:inputNumber component, use the ui:inputNumber component. When providing a number value with commas, use type="integer". This example returns 100,000.

1<aura:attribute name="number" type="integer" default="100,000"/>
2<ui:inputNumber label="Number" value="{!v.number}"/>

For type="string", provide the number without commas for the output to be formatted accordingly. This example also returns 100,000.

1<aura:attribute name="number" type="string" default="100000"/>
2<ui:inputNumber label="Number" value="{!v.number}"/>

Specifying format="#,##0,000.00#" returns a formatted number value like 10,000.00.

1<ui:label label="Cost"/>
2<ui:inputNumber aura:id="costField" format="#,##0,000.00#" value="10000"/>

This example retrieves the value of a ui:inputNumber component, validates the input, and displays it using ui:outputNumber.

1<aura:component> 
2 <ui:inputNumber aura:id="inputCmp" label="Enter a number: "/> <br/>
3    <ui:button label="Submit" press="{!c.validate}"/>
4    <ui:outputNumber aura:id="outNum" value=""/>
5</aura:component>

1swfobject.registerObject("clippy.codeblock-6", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({  
18    validate : function(component, evt) {
19        var inputCmp = component.find("inputCmp");
20        var value = inputCmp.get("v.value");
21        
22        var myOutput = component.find("outNum");
23        
24        myOutput.set("v.value", value);
25        
26        // Check if input is numeric
27        if (isNaN(value)) {
28            // Set error message
29            inputCmp.setValid("v.value", false);
30            inputCmp.addErrors("v.value", [{message:"Input not a number: " + value}]);
31        } else {
32            // Clear error
33            inputCmp.setValid("v.value", true);
34        }
35    }
36})

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".
`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`	BigDecimal	The input value of the number.

Events

Event Name	Event Type	Description
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`click`	COMPONENT	Indicates that a component has been clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.
`keyup`	COMPONENT	Indicates that the user has released a keyboard key.
`keypress`	COMPONENT	Indicates that the user has pressed and held down a keyboard key.
`select`	COMPONENT	Indicates that the user has made a selection.
`keydown`	COMPONENT	Indicates that the user has pressed and released a keyboard key.
`focus`	COMPONENT	Indicates that a component has been put on focus.
`blur`	COMPONENT	Indicates that a component has been put out of focus.
`validationError`	COMPONENT	Indicates that the component has validation error(s).
`paste`	COMPONENT	Indicates that the user has pasted content from the clipboard.
`change`	COMPONENT	Indicates that the content of a component or the state has changed.
`clearErrors`	COMPONENT	Indicates that any validation error should be cleared.
`cut`	COMPONENT	Indicates that the user has cut content to the clipboard.
`copy`	COMPONENT	Indicates that the user has copied content to the clipboard.