Using the UI Components

Components in the ui namespace are deprecated as of API version 47.0. We recommend you use components in the lightning namespace instead. For more information, see Working with UI Components.

Note

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="assistiveText" 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 the Salesforce app, use the force:createRecord and force:recordEdit events to utilize the built-in record create and edit pages.

Tip

Lightning Aura Components Developer Guide

Using the UI Components