Lightning Components Developer’s Guide
jNewer Version Available
Number Fields
Number fields can contain a numerical value. They support client-side formatting, localization, and common keyboard and mouse events.
If you want to render the output from these field components, use the respective ui:output components. For example, to render the output for the ui:inputNumber component, use ui:outputNumber.
| Type | Related Components | Description |
|---|---|---|
| Number | ui:inputNumber | An input field for entering a numerical value |
| ui:outputNumber | Displays a number | |
| Currency | ui:inputCurrency | An input field for entering currency |
| ui:outputCurrency | Displays currency |
Using the Number Fields
This example shows a number field, which displays a value of 10.
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:attribute name="num" type="integer" default="10"/>
18<ui:inputNumber aura:id="num" label="Age" value="{!v.num}"/>The previous example results in the following HTML.
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<div class="uiInput uiInputText uiInputNumber">
18 <label class="uiLabel-left uiLabel">
19 <span>Enter age</span>
20 </label>
21 <input aria-describedby placeholder type="text"
22 class="uiInput uiInputText uiInputNumber">
23</div>Binding Field Values
You can bind field values to a field in an object using expressions such as {!v.myAttribute.Name} or {!v.myAttribute.namespace__MyField__c}, and saving an input value via an Apex controller. For an example, see Create a Standalone Lightning App.
Returning a Valid Number
The value of the ui:inputNumber component expects a valid number and won’t work with commas. If you want to include commas, use type="Integer" instead of type="String".
This example returns 100,000.
1<aura:attribute name="number" type="Integer" default="100,000"/>
2<ui:inputNumber label="Number" value="{!v.number}"/>This example also returns 100,000.
1<aura:attribute name="number" type="String" default="100000"/>
2<ui:inputNumber label="Number" value="{!v.number}"/>Formatting and Localizing the Number Fields
The format attribute determines the format of the number input. The Locale default format is used if none is provided. The following code is a basic set up of a number field, which displays 10,000.00 based on the provided format attribute.
1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<ui:label label="Cost" for="costField"/>
18<ui:inputNumber aura:id="costField" format="#,##0,000.00#" value="10000"/>Styling Your Number Fields
You can style the appearance of your number field and output. In the CSS file of your component, add the corresponding class selectors. The following class selectors provide styles to the string rendering of the numbers. For example, to style the ui:inputCurrency component, use .THIS .uiInputCurrency, or .THIS.uiInputCurrency if it’s a top-level element.
The following example provides styles to a ui:inputNumber component with the myStyle selector.
1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!-- Component markup -->
18<ui:inputNumber class="myStyle" label="Amount" placeholder="0" />
19
20/* CSS */
21.THIS .myStyle {
22 border: 1px solid #dce4ec;
23 border-radius: 4px;
24}