A ui:inputNumber component represents a number input field, which is rendered as an HTML input element of type text. It uses JavaScript’s Number type MAX_SAFE_INTEGER and MIN_SAFE_INTEGER precision to determine the supported number of digits, which is about 16 digits. Numbers outside of the precision can get truncated or rounded.
To apply Lightning Design System styling, we recommend that you use lightning:input with type="number" instead of ui:inputNumber. To render the output from a ui:inputNumber component, use the ui:outputEmail component. Similarly, we recommend using lightning:formattedNumber instead of ui:outputNumber.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> <label> <span>Age</span> </label> <input max="99999999999999" step="1" type="text" min="-99999999999999"> </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> <aura:attribute name="myNumber" type="integer" default="10"/> <ui:inputNumber label="Enter a number: " value="{!v.myNumber}" updateOn="keyup"/> <br/> <ui:outputNumber value="{!v.myNumber}"/> </aura:component>
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 | Decimal | 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. |