lightning:textarea

Represents a multiline text input.

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}" />
Input Validation

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:

  • A required field is empty when required is set to true.
  • The input value contains fewer characters than that specified by the minlength attribute.
  • The input value contains more characters than that specified by the maxlength attribute.

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."/>
Accessibility

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.

Methods

This 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.

Attributes

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.