A lightning:textarea component creates an HTML textarea element for entering multi-line text input. A text area holds an unlimited number of characters.
This component inherits styling from textarea in the Lightning Design System.
The rows and cols HTML attributes are not supported. To apply a custom height and width for the text area, use the class attribute. To set the input for the text area, set its value using the value attribute. Setting this value overwrites any initial value that's provided.
The following example creates a text area with a maximum length of 300 characters.
<lightning:textarea name="myTextArea" value="initial value" label="What are you thinking about?" maxlength="300" />
You can define a client-side controller action to handle input events like onblur, onfocus, and onchange. For example, to handle a change event on the component, use the onchange attribute.
<lightning:textarea name="myTextArea" value="initial value" label="What are you thinking about?" onchange="{!c.countLength}" />
Client-side input validation is available for this component. Set a maximum length using the maxlength attribute or a minimum length using the minlength attribute. You can make the text area a required field by setting required="true". An error message is automatically displayed in the following cases:
To check the validity states of an input, use the validity attribute, which is based on the ValidityState object. You can access the validity states in your client-side controller. This validity attribute returns an object with boolean properties. See lightning:input for more information.
You can override the default message by providing your own values for messageWhenValueMissing, messageWhenBadInput, or messageWhenTooLong.
For example,
<lightning:textarea name="myText" required="true" label="Your Name" messageWhenValueMissing="This field is required."/>
You must provide a text label for accessibility to make the information available to assistive technology. The label attribute creates an HTML label element for your input component.
MethodsThis component supports the following methods.
focus(): Sets the focus on the element.
showHelpMessageIfInvalid(): Shows the help message if the form control is in an invalid state.
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
accesskey | String | Specifies a shortcut key to activate or focus an element. | |
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class that will be applied to the outer element. This style is in addition to base classes associated with the component. | |
disabled | Boolean | Specifies that an input element should be disabled. This value defaults to false. | |
label | String | Text that describes the desired textarea input. | Yes |
maxlength | Integer | The maximum number of characters allowed in the textarea. | |
messageWhenBadInput | String | Error message to be displayed when a bad input is detected. | |
messageWhenTooLong | String | Error message to be displayed when the value is too long. | |
messageWhenValueMissing | String | Error message to be displayed when the value is missing. | |
minlength | Integer | The minimum number of characters allowed in the textarea. | |
name | String | Specifies the name of an input element. | Yes |
onblur | Action | The action triggered when the element releases focus. | |
onchange | Action | The action triggered when a value attribute changes. | |
onfocus | Action | The action triggered when the element receives focus. | |
placeholder | String | Text that is displayed when the field is empty, to prompt the user for a valid entry. | |
readonly | Boolean | Specifies that an input field is read-only. This value defaults to false. | |
required | Boolean | Specifies that an input field must be filled out before submitting the form. This value defaults to false. | |
tabindex | Integer | Specifies the tab order of an element (when the tab button is used for navigating). | |
validity | Object | Represents the validity states that an element can be in, with respect to constraint validation. | |
value | String | The value of the textarea, also used as the default value during init. | |
variant | String | The variant changes the appearance of an input field. Accepted variants include standard and label-hidden. This value defaults to standard. |