ui:inputTextArea | Lightning Components Developer’s Guide

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.

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

This example results in the following HTML.

1<div class="uiInput uiInputTextArea">
2    <label class="uiLabel-left uiLabel">
3        <span>Comments</span>
4    </label>
5    <textarea cols="20" rows="5">
6    </textarea>
7</div>

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

1<aura:component>
2     <ui:inputTextArea aura:id="comments" label="Comments"  value="My comments" rows="5"/>
3     <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
4     
5     <div aura:id="msg" class="hide">
6  You entered: <ui:outputTextArea aura:id="oTextarea" value=""/>
7 </div>
8</aura:component>

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    setOutput : function(component, event, helper) {
19    	var el = component.find("msg");
20    	$A.util.removeClass(el.getElement(), 'hide');
21    	
22        var comments = component.find("comments").get("v.value");
23        var oTextarea = component.find("oTextarea");
24        oTextarea.set("v.value", comments);
25    }
26})

Attributes

Attribute Name	Attribute Type	Description
`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".
`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
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`click`	COMPONENT	Indicates that a component has been clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.
`keyup`	COMPONENT	Indicates that the user has released a keyboard key.
`keypress`	COMPONENT	Indicates that the user has pressed and held down a keyboard key.
`select`	COMPONENT	Indicates that the user has made a selection.
`keydown`	COMPONENT	Indicates that the user has pressed and released a keyboard key.
`focus`	COMPONENT	Indicates that a component has been put on focus.
`blur`	COMPONENT	Indicates that a component has been put out of focus.
`validationError`	COMPONENT	Indicates that the component has validation error(s).
`paste`	COMPONENT	Indicates that the user has pasted content from the clipboard.
`change`	COMPONENT	Indicates that the content of a component or the state has changed.
`clearErrors`	COMPONENT	Indicates that any validation error should be cleared.
`cut`	COMPONENT	Indicates that the user has cut content to the clipboard.
`copy`	COMPONENT	Indicates that the user has copied content to the clipboard.