Input Number (Deprecated)

ui:inputNumber

Deprecated as of API version 47.0. We recommend migrating to Lightning Web Components and using the lightning-input component.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App

Deprecation Guidelines

We recommend using Lightning Web Components whenever possible. When migrating to Lightning Web Components, use lightning-input with number type.

For more information, see Aura Components in the ui Namespace Are Deprecated.

Usage Overview (Deprecated)

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:outputNumber component. Similarly, we recommend using lightning:formattedNumber instead of ui:outputNumber.

This example shows a number field, which displays a value of 10.

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

The previous example results in the following HTML.

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

To render the output from a ui:inputNumber component, use the ui:outputNumber 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
3<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
3<ui:inputNumber label="Number" value="{!v.number}" />

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

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

To create forms for Salesforce objects without using Apex controllers, use lightning:inputField with lightning:recordEditForm, or use lightning:recordForm. To create an input field for different data types, use lightning:input.

Note

Attributes

Name	Description	Type	Default
body	The body of the component. In markup, this is everything in the body of the tag.	Aura.Component[]
class	A CSS style to be attached to the component. This style is added in addition to base styles output by the component.	String
disabled	Specifies whether the component should be displayed in a disabled state. Default value is "false".	Boolean	false
errors	The list of errors to be displayed.	Object[]
format	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.	String
label	The text of the label component	String
labelClass	The CSS class of the label component	String
maxlength	The maximum number of characters that can be typed into the input field. Corresponds to the maxlength attribute of the rendered HTML input element.	Integer
placeholder	Text that is displayed when the field is empty, to prompt the user for a valid entry.	String
required	Specifies whether the input is required. Default value is "false".	Boolean	false
requiredIndicatorClass	The CSS class of the required indicator component	String
size	The width of the input field, in characters. Corresponds to the size attribute of the rendered HTML input element.	Integer
updateOn	Updates the component's value binding if the updateOn attribute is set to the handled event. Default value is "change".	String	change
value	The input value of the number.	Decimal
value	The value currently in the input field.	String

Input Number (Deprecated)

Deprecation Guidelines

Usage Overview (Deprecated)

Attributes

Lightning Component Reference

Contents