A ui:inputTextArea component represents a multi-line text input control, which is rendered as an HTML textarea tag. To apply Lightning Design System styling, we recommend that you use lightning:textarea instead of ui:inputTextArea.
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> <label> <span>Comments</span> </label> <textarea cols="20" rows="5"> </textarea> </div>
This example retrieves the value of a ui:inputTextArea component and displays it using ui:outputTextArea. To apply Lightning Design System styling, we recommend that you use lightning:textarea instead of ui:inputTextArea.
<aura:component> <ui:inputTextArea aura:id="comments" label="Comments" value="My comments" rows="5"/> <ui:button label="Submit" press="{!c.setOutput}"/> <div aura:id="msg"> 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); } })
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. |
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. |