---
schema_version: "1"
id: 614fe215c2f6215d668ec1b2024d0e988fa2e1de49b85fb02d8f35d72e0768b3
title: Textarea Lightning Web Component ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_textarea_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_textarea_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 8eaf757c6a803f3d87005532212cec0f6044ce4545ca19686d0e2dbb0619a328
description: For the managed package runtime, this page contains a Textarea LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# Textarea Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a Textarea LWC ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The _Textarea Lightning Web Component_ creates an HTML textarea element for entering multi-line text input. A text area holds an unlimited number of characters.

## Available c-textarea Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d178714e65">
              <p style="margin-bottom:0;">Attrubute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d178714e71">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d178714e77">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d178714e83">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d178714e89">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">label</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">
              <p style="margin-bottom:0;">yes</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Adds a title for the textarea element.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">placeholder</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Adds text to inside the textarea that displayed when the field is empty, prompting the user for a valid entry.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">name</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Specifies the name of the textarea element.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">message-when-bad-input</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Displays an error message when a bad input is detected.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">message-when-too-short</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Displays an error message when the value is too short.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">message-when-too-long</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Displays an error message when the value is too long.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">message-when-value-missing</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Displays an error message when the value is missing.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">access-key</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">The keyboard shortcut for input field.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">max-length</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">
              <p style="margin-bottom:0;">number</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">The maximum number of characters allowed in the textarea.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">min-length</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Sets the minimum number of characters allowed in the textarea.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">value</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Sets the value of the textarea input.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">disabled</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">If present, the textarea field is disabled and users cannot interact with it.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">read-only</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">If present, the textarea field is read-only and user cannot edit it.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">required</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">If present, user must fill out textarea in order to submit the form.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">variant</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">
              <p style="margin-bottom:0;">standard, label-hidden (Default: standard)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Changes the appearance of the input field.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">validity</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Sets the validity states for the textarea element, with respect to constraint validation.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">field-level-help</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">To provide an informational tooltip on the textarea input field, set this attribute.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">
              <p style="margin-bottom:0;">slds, nds, (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Sets the theme for the textarea component.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">extraclass</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Adds a class to the textarea input element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e65 ">
              <p style="margin-bottom:0;">height</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e77 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d178714e89 ">
              <p style="margin-bottom:0;">Sets the height of the textarea.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-textarea Component

```
 <c-textarea
    label="Message When Value Long(30 char)"
    max-length="30"
    message-when-too-long="Value is too long."
    placeholder="Enter Description..."
></c-textarea>
```

## Available Methods

checkValidity()

Returns the valid attribute value (Boolean) on the ValidityState object.

reportValidity()

Displays the error messages and returns false if the input is invalid. If the input is valid, reportValidity() clears displayed error messages and returns true.

setCustomValidity()

Displays a custom error message when the textarea value is submitted. Takes the _message_ argument. If _message_ is an empty string, the error message is reset.

showHelpMessageIfInvalid()

Displays error messages on invalid fields. An invalid field fails at least one constraint validation and returns false when checkValidity() is called.

focus()

Sets focus on the textarea field.

blur()

Removes focus from the textarea field.

## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The _Textarea Lightning Web Component_ creates an HTML textarea element for entering multi-line text input. A text area holds an unlimited number of characters.

## Available c-textarea Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d178714e684">
              <p style="margin-bottom:0;">Attrubute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d178714e690">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d178714e696">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d178714e702">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d178714e708">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">label</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">
              <p style="margin-bottom:0;">yes</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">Adds a title for the textarea element.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">placeholder</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">Adds text to inside the textarea that displayed when the field is empty, prompting the user for a valid entry.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">name</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">Specifies the name of the textarea element.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">message-when-bad-input</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">Displays an error message when a bad input is detected.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">message-when-too-short</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">Displays an error message when the value is too short.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">message-when-too-long</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">Displays an error message when the value is too long.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">message-when-value-missing</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">Displays an error message when the value is missing.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">access-key</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">The keyboard shortcut for input field.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">max-length</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">
              <p style="margin-bottom:0;">number</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">The maximum number of characters allowed in the textarea.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">min-length</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">Sets the minimum number of characters allowed in the textarea.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">value</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">Sets the value of the textarea input.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">disabled</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">If present, the textarea field is disabled and users cannot interact with it.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">read-only</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">If present, the textarea field is read-only and user cannot edit it.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">required</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">If present, user must fill out textarea in order to submit the form.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">variant</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">
              <p style="margin-bottom:0;">standard, label-hidden (Default: standard)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">Changes the appearance of the input field.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">validity</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">Sets the validity states for the textarea element, with respect to constraint validation.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">field-level-help</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">To provide an informational tooltip on the textarea input field, set this attribute.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attrubute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e684 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e690 ">
              <p style="margin-bottom:0;">slds, nds, (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e696 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e702 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d178714e708 ">
              <p style="margin-bottom:0;">Sets the theme for the textarea component.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-textarea Component

```
 <c-textarea
    label="Message When Value Long(30 char)"
    max-length="30"
    message-when-too-long="Value is too long."
    placeholder="Enter Description..."
></c-textarea>
```

## Available Methods

checkValidity()

Returns the valid attribute value (Boolean) on the ValidityState object.

reportValidity()

Displays the error messages and returns false if the input is invalid. If the input is valid, reportValidity() clears displayed error messages and returns true.

setCustomValidity()

Displays a custom error message when the textarea value is submitted. Takes the _message_ argument. If _message_ is an empty string, the error message is reset.

showHelpMessageIfInvalid()

Displays error messages on invalid fields. An invalid field fails at least one constraint validation and returns false when checkValidity() is called.

focus()

Sets focus on the textarea field.

blur()

Removes focus from the textarea field.