> ## Documentation Index
> Fetch the complete documentation index at: https://dev.writer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Text area Input

A user input component that allows users to enter multi-line text values.

<img src="https://mintcdn.com/writer/dHnl9w_Om9ycQRLE/framework/public/components/textareainput.png?fit=max&auto=format&n=dHnl9w_Om9ycQRLE&q=85&s=7d78bb7c819b5751d77d38bff4e6ea8e" width="970" height="271" data-path="framework/public/components/textareainput.png" />

## Overview

The **Text area Input** component allows users to enter multi-line text values. It's designed for longer text content like descriptions, comments, reviews, or any content that requires multiple lines.

## Common use cases

* **Long-form content**: Collect essays, articles, or detailed descriptions
* **User feedback**: Gather reviews, comments, or support requests
* **Data entry**: Allow users to paste large amounts of text or data
* **Configuration**: Collect complex configuration settings or parameters

## How it works

1. **Multi-line input**: Users can enter text across multiple lines
2. **Manual resizing**: Users can resize the text area by dragging the bottom corner
3. **State binding**: Content automatically saves to the specified state variable
4. **Real-time events**: Triggers events as users type or finish editing
5. **Configurable rows**: Set the initial number of rows to display

The component provides a familiar text editing experience with manual resizing for longer content entry.

## Configuration options

### Basic settings

* **Label**: Text label displayed above the input field
* **Placeholder**: Hint text shown when the field is empty
* **Rows**: Number of rows to display (default: `5`)
* **Link variable**: The name of the state variable that stores the input value

### Styling options

* **Custom CSS classes**: Apply additional styling

### Events

* **wf-change**: Triggered as users type (real-time) - payload contains the text area content
* **wf-change-finish**: Triggered when users finish editing (on blur) - payload contains the text area content

## Example

### Customer feedback form

This example shows how to create a customer feedback form with a text area for detailed comments.

**Interface:**

* Text Input for customer name
* Text area Input for feedback details
* Button to submit the form

**Text area Input configuration:**

* Label: "Your feedback"
* Placeholder: "Please share your experience with our product..."
* State element: `customer_feedback`
* Rows: 4

<img src="https://mintcdn.com/writer/pM8WhgC5nDcujQ4i/images/agent-builder/components/textareainput-configuration.png?fit=max&auto=format&n=pM8WhgC5nDcujQ4i&q=85&s=d00e7359cce0d8fefcdf2818f0229bf8" alt="Text area Input configuration" width="2704" height="1558" data-path="images/agent-builder/components/textareainput-configuration.png" />

## Fields

<table className="componentFields">
  <thead>
    <th>Name</th>
    <th>Type</th>
    <th class="desc">Description</th>
    <th>Options</th>
  </thead>

  <tbody>
    <tr>
      <td>Label</td>
      <td>Text</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Placeholder</td>
      <td>Text</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Rows</td>
      <td>Number</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Custom CSS classes</td>
      <td>Text</td>
      <td>CSS classes, separated by spaces. You can define classes in custom stylesheets.</td>

      <td>
        <span>-</span>
      </td>
    </tr>
  </tbody>
</table>