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

Input Components Overview

Users interact with your app through input elements to select or enter values. The framework provides a range of input elements such as text fields, buttons, checkboxes, and so on.

ui:input provides child components, such as ui:inputText and ui:inputCheckbox, which correspond to common input elements. Each of these components support various input events, simplifying event handling for user interface events.

Using the Input Components

To use input components in your own custom component, add them to your .cmp or .app resource. This example is a basic set up of a text field and button.

1swfobject.registerObject("clippy.codeblock-0", "9");<ui:inputText label="Name" aura:id="name" value="" placeholder="First, Last"/>
2<ui:outputText aura:id="nameOutput" value=""/>
3<ui:button aura:id="outputButton" label="Submit" press="{!c.getInput}"/>

The ui:outputText component acts as a placeholder for the output value of its corresponding ui:inputText component. The value in the ui:outputText component can be set with the following client-side controller action.

1swfobject.registerObject("clippy.codeblock-1", "9");getInput : function(cmp, event) {
2      var fullName = cmp.find("name").get("v.value");
3      var outName = cmp.find("nameOutput");
4      outName.set("v.value", fullName);
5    }

These are the common field components you can use.

Field Type Description Related Components
Date and time An input field for entering date and time. ui:inputDate

ui:inputDateTime

ui:outputDate

ui:outputDateTime
Number An input field for entering a numerical value. ui:inputNumber

ui:outputNumber
Text An input field for entering single line of text. ui:inputText

ui:outputText