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.
<aura:attribute name="num" type="integer" default="10"/> <ui:inputNumber aura:id="num" label="Age" value="{!v.num}"/>
The previous example results in the following HTML.
<div class="uiInput uiInputNumber uiInput--default uiInput--input"> <label class="uiLabel-left form-element__label uiLabel"> <span>Age</span> </label> <input max="99999999999999" step="1" type="text" min="-99999999999999" class="input"> </div>
<aura:attribute name="number" type="integer" default="100,000"/> <ui:inputNumber label="Number" value="{!v.number}"/>
<aura:attribute name="number" type="string" default="100000"/> <ui:inputNumber label="Number" value="{!v.number}"/>
Specifying format="#,##0,000.00#" returns a formatted number value like 10,000.00.
<ui:inputNumber label="Cost" aura:id="costField" format="#,##0,000.00#" value="10000"/>
<aura:component> <ui:inputNumber aura:id="inputCmp" label="Enter a number: "/> <br/> <ui:button label="Submit" press="{!c.validate}"/> <ui:outputNumber aura:id="outNum" value=""/> </aura:component>
({ validate : function(component, evt) { var inputCmp = component.find("inputCmp"); var value = inputCmp.get("v.value"); var myOutput = component.find("outNum"); myOutput.set("v.value", value); // Check if input is numeric if (isNaN(value)) { inputCmp.set("v.errors", [{message:"Input not a number: " + value}]); } else { inputCmp.set("v.errors", null); } } })
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
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 | BigDecimal | The input value of the number. |
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. |