ui:inputTextArea

An HTML textarea element that can be editable or read-only. Scroll bars may not appear on Chrome browsers in Android devices, but you can select focus in the textarea to activate scrolling.

A ui:inputTextArea component represents a multi-line text input control, which is rendered as an HTML textarea tag. To render the output from a ui:inputTextArea component, use the ui:outputTextArea component.

This is a basic set up of a ui:inputTextArea component.

<ui:inputTextArea aura:id="comments" label="Comments" value="My comments" rows="5"/>

This example results in the following HTML.

<div class="uiInput uiInputTextArea uiInput--default uiInput--textarea">
    <label class="uiLabel-left form-element__label uiLabel">
        <span>Comments</span>
    </label>
    <textarea class="textarea" cols="20" rows="5">
    </textarea>
</div>

This example retrieves the value of a ui:inputTextArea component and displays it using ui:outputTextArea.

<aura:component>
     <ui:inputTextArea aura:id="comments" label="Comments"  value="My comments" rows="5"/>
     <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
     
     <div aura:id="msg" class="hide">
  You entered: <ui:outputTextArea aura:id="oTextarea" value=""/>
 </div>
</aura:component>
({
    setOutput : function(component, event, helper) {
    	var cmpMsg = component.find("msg");
    	$A.util.removeClass(cmpMsg, 'hide');
    	
        var comments = component.find("comments").get("v.value");
        var oTextarea = component.find("oTextarea");
        oTextarea.set("v.value", comments);
    }
})

Attributes

Attribute Name Attribute Type Description Required?
body Component[] The body of the component. In markup, this is everything in the body of the tag.
class String A CSS style to be attached to the component. This style is added in addition to base styles output by the component.
cols Integer The width of the text area, which is defined by the number of characters to display in a single row at a time. Default value is “20”.
disabled Boolean Specifies whether the component should be displayed in a disabled state. Default value is "false".
errors List The list of errors to be displayed.
label String The text of the label component
labelClass String The CSS class of the label component
maxlength Integer The maximum number of characters that can be typed into the input field. Corresponds to the maxlength attribute of the rendered HTML textarea element.
placeholder String The text that is displayed by default.
readonly Boolean Specifies whether the text area should be rendered as read-only. Default value is “false”.
required Boolean Specifies whether the input is required. Default value is "false".
requiredIndicatorClass String The CSS class of the required indicator component
resizable Boolean Specifies whether or not the textarea should be resizable. Defaults to true.
rows Integer The height of the text area, which is defined by the number of rows to display at a time. Default value is “2”.
updateOn String Updates the component's value binding if the updateOn attribute is set to the handled event. Default value is "change".
value String The value currently in the input field.

Events

Event Name Event Type Description
dblclick COMPONENT The event fired when the user double-clicks the component.
mouseover COMPONENT The event fired when the user moves the mouse pointer over the component.
mouseout COMPONENT The event fired when the user moves the mouse pointer away from the component.
mouseup COMPONENT The event fired when the user releases the mouse button over the component.
mousemove COMPONENT The event fired when the user moves the mouse pointer over the component.
click COMPONENT The event fired when the user clicks on the component.
mousedown COMPONENT The event fired when the user clicks a mouse button over the component.
select COMPONENT The event fired when the user selects some text.
blur COMPONENT The event fired when the user moves off from the component.
focus COMPONENT The event fired when the user focuses on the component.
keypress COMPONENT The event fired when the user presses or holds down a keyboard key on the component.
keyup COMPONENT The event fired when the user releases a keyboard key on the component.
keydown COMPONENT The event fired when the user presses a keyboard key on the component.
cut COMPONENT The event fired when the user cuts content to the clipboard.
onError COMPONENT The event fired when there are any validation errors on the component.
onClearErrors COMPONENT The event fired when any validation errors should be cleared.
change COMPONENT The event fired when the user changes the content of the input.
copy COMPONENT The event fired when the user copies content to the clipboard.
paste COMPONENT The event fired when the user pastes content from the clipboard.