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}"/>
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); }
<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}"/>