Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Number Fields

Number fields can contain a numerical value. They support client-side formatting, localization, and common keyboard and mouse events.

To render the output for the ui:inputNumber component, use ui:outputNumber.

Using the Number Fields

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

1swfobject.registerObject("clippy.codeblock-0", "9");<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.

1swfobject.registerObject("clippy.codeblock-1", "9");<div class="uiInput uiInputText uiInputNumber">
2  <label class="uiLabel-left uiLabel">
3    <span>Enter age</span>
4  </label>
5  <input aria-describedby placeholder type="text" 
6         class="uiInput uiInputText uiInputNumber">
7</div>

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");<ui:label label="Cost" for="costField"/>
2<ui:inputNumber aura:id="costField" format="#,##0,000.00#" value="10000"/>

Styling Your Number Fields

The following example provides styles to a ui:inputNumber component with the myStyle selector.

1swfobject.registerObject("clippy.codeblock-5", "9");<!-- Component markup -->
2<ui:inputNumber class="myStyle" label="Amount" placeholder="0" />
3
4/* CSS */
5.THIS .myStyle { 
6  border: 1px solid #dce4ec;
7  border-radius: 4px;
8}