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.

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 .

Note

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");.

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

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="assitiveText" to make the label available to assistive technologies.

Note

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.

1getInput : 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    }

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.

1<aura:attribute name="first" type="String" default="John"/>
2<aura:attribute name="last" type="String" default="Doe"/>
3
4<ui:inputText label="First Name" value="{!v.first}" updateOn="keyup"/>
5<ui:inputText label="Last Name" value="{!v.last}" updateOn="keyup"/>
6
7<!-- Returns "John Doe" -->
8<ui:outputText value="{!v.first +' '+ v.last}"/>

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.

Tip

Lightning Components Developer's Guide

Using the UI Components