# Text Area Field

## Overview

<figure><img src="/files/2B0poz8gcZR1GdH6p7mP" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Text area fields are used in forms and input scenarios where users need to provide larger amounts of text, such as comments, descriptions, or messages. They are ideal for situations requiring more space than a standard text field, enabling users to input detailed information.

### How it works

A text area field component typically includes a label, a multi-line input area, and optional elements like helper or placeholder text for user guidance. It can display different states, such as focused, filled, or error, indicating its current status. Text area fields are essential interactive elements in forms and interfaces where extensive user input is needed.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-textarea
    label="Description"
    placeholder="Enter description"
    max_characters="200"
    value=""
    input_id="input"
    textarea_name="textarea-name"
    aria_label="textarea"
    helper_text="This is a helper text"
    error_message=""
    show_info_icon="true"
    validation_type=""
    validation_id=""
    input_status=""
    enable_rich_editor="false"
    custom_class=""
    component_mode=""
    onchange=""
></dda-textarea>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaTextarea
    label="Description"
    placeholder="Enter description"
    max_characters="200"
    value=""
    input_id="input"
    textarea_name="textarea-name"
    aria_label="textarea"
    helper_text="This is a helper text"
    error_message=""
    show_info_icon="true"
    validation_type=""
    validation_id=""
    input_status=""
    enable_rich_editor="false"
    custom_class=""
    component_mode=""
    onchange=""
></DdaTextarea>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaTextarea
    label="Description"
    placeholder="Enter description"
    max_characters="200"
    value=""
    input_id="input"
    textarea_name="textarea-name"
    aria_label="textarea"
    helper_text="This is a helper text"
    error_message=""
    show_info_icon="true"
    validation_type=""
    validation_id=""
    input_status=""
    enable_rich_editor="false"
    custom_class=""
    component_mode=""
    onchange=""
></DdaTextarea>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-textarea
    label="Description"
    placeholder="Enter description"
    max_characters="200"
    value=""
    input_id="input"
    textarea_name="textarea-name"
    aria_label="textarea"
    helper_text="This is a helper text"
    error_message=""
    show_info_icon="true"
    validation_type=""
    validation_id=""
    input_status=""
    enable_rich_editor="false"
    custom_class=""
    component_mode=""
    onchange=""
></dda-textarea>
```

{% endtab %}
{% endtabs %}

### Properties

For version 3.12.0+ you can use the new unified [input interactions](/developers/input-interactions.md) to set/get data from the components.

| Property             | Description                                                                                                                                                                                                             | Type      |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `label`              | A string that sets the label text for the textarea or rich text editor. This is displayed above the input field to provide context or instructions.                                                                     | `string`  |
| `placeholder`        | A string that sets the placeholder text inside the textarea or rich text editor when it is empty.                                                                                                                       | `string`  |
| `max_characters`     | A number specifying the maximum allowed characters in the input field. This is used to restrict the user’s input and is displayed in the helper or error message.                                                       | `number`  |
| `value`              | The initial value of the textarea or rich text editor. It will bind to the content inside the input and can be used to set its initial state.                                                                           | `string`  |
| `input_id`           | A unique string identifier for the input field. This is used to link the label with the input and for accessibility purposes.                                                                                           | `string`  |
| `aria_label`         | An optional string that provides an accessible label for the input field, improving accessibility for screen readers. It helps users with visual impairments understand the purpose of the input field.                 | `string`  |
| `helper_text`        | A string providing additional guidance or information about the input field. It can be displayed below the input to assist the user.                                                                                    | `string`  |
| `error_message`      | A string containing an error message to be displayed when the input validation fails. This will appear below the input field when an error occurs.                                                                      | `string`  |
| show\_info\_icon     | Able to diable and enable info icon                                                                                                                                                                                     | `boolean` |
| `validation_type`    | An optional string that defines the type of validation applied to the input. It could affect the styling or behavior based on different validation scenarios.                                                           | `string`  |
| `component_mode`     | An optional string that can be used to apply a specific mode or variation of the component, such as a 'light' or 'dark' state, for customization.                                                                       | `string`  |
| `custom_class`       | A string that allows you to pass custom CSS classes to further customize the styling of the input container.                                                                                                            | `string`  |
| `enable_rich_editor` | A boolean value that determines whether to enable a rich text editor (using the Quill library). If `true`, the Quill editor is rendered; if `false`, a standard textarea is displayed.                                  | `boolean` |
| `input_status`       | A string that allows customization of the input’s visual appearance depending on its status (e.g., active, disabled, etc.). This is used for styling purposes.                                                          | `string`  |
| `validation_id`      | Defines the `id` of the element that displays validation or helper messages. This links the textarea to the message for improved accessibility using `aria-describedby`. Leave empty if no validation message is shown. | `string`  |

## Anatomy

<figure><img src="/files/weY5CZGCGSziQgkaXAWV" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Label**: A title or descriptor for the input field, guiding users on what information to enter.

**Lead-Icon**: An optional icon that provides additional context or represents the type of input required.

**Placeholder**: Sample text displayed within the input field that hints at the expected input format or content.

**Caption**: Helper or footer text that offers further instructions or clarifications for the input.

**Trail-Text**: A counter or indicator often used to show the number of characters entered or remaining, providing feedback on input limits.

## Dos and Don'ts

| Dos                                                                                 | Don'ts                                                                                          |
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| Use text area fields for inputs that require multiple lines of text.                | Don't use text area fields for short or single-line inputs; use standard text fields for those. |
| Provide a clear and concise label that describes the expected input.                | Avoid using ambiguous or unclear labels for text area fields.                                   |
| Include placeholder text to give users an example of the expected input format.     | Don't rely solely on placeholder text for essential instructions.                               |
| Ensure text area fields are large enough to be easily tappable or clickable.        | Avoid making text area fields too small to interact with comfortably.                           |
| Use helper text to provide additional context or instructions.                      | Don't overload the text area field with too much information.                                   |
| Validate input and provide clear error messages when necessary.                     | Don't provide generic error messages that don't help users understand the issue.                |
| Keep consistent styling and spacing across all text area fields in the application. | Don't use inconsistent styles that may confuse users.                                           |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://designsystem.dubai.ae/components/text-area-field.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.