Using the UI Components

Users interact with your app through input elements to select or enter values. Components such as ui:inputText and ui:inputCheckbox correspond to common input elements. These components simplify event handling for user interface events.
Note

Note

For all available component attributes and events, see the component reference at https://<myDomain>.lightning.force.com/auradocs/reference.app, where <myDomain> is the name of your custom Salesforce domain .

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. The aura:id attribute defines a unique ID that enables you to reference the component from your JavaScript code using cmp.find("myID");.

<ui:inputText label="Name" aura:id="name" placeholder="First, Last"/>
<ui:outputText aura:id="nameOutput" value=""/>
<ui:button aura:id="outputButton" label="Submit" press="{!c.getInput}"/>
Note

Note

All text fields must specify the label attribute to provide a textual label of the field. If you must hide the label from view, set labelClass="assistiveText" to make the label available to assistive technologies.

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.

getInput : function(cmp, event) {
      var fullName = cmp.find("name").get("v.value");
      var outName = cmp.find("nameOutput");
      outName.set("v.value", fullName);
    }
The following example is similar to the previous, but uses value binding without a client-side controller. The ui:outputText component reflects the latest value on the ui:inputText component when the onkeyup browser event is fired.
<aura:attribute name="first" type="String" default="John"/>
<aura:attribute name="last" type="String" default="Doe"/>

<ui:inputText label="First Name" value="{!v.first}" updateOn="keyup"/>
<ui:inputText label="Last Name" value="{!v.last}" updateOn="keyup"/>

<!-- Returns "John Doe" -->
<ui:outputText value="{!v.first +' '+ v.last}"/>
Tip

Tip

To create and edit records in Salesforce1, use the force:createRecord and force:recordEdit events to utilize the built-in record create and edit pages.