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

# Textarea

> Multi-line text input component optimized for longer content

## Overview

HuxTextarea is a customizable multi-line text input component with consistent styling and extensive customization options. It provides a clean, modern textarea with support for labels, hints, validation, and character counting while automatically adapting to light and dark themes. Optimized for longer text input with proper height handling.

## Basic Usage

### Simple Textarea

```dart theme={null}
HuxTextarea(
  label: 'Description',
  hint: 'Enter a description...',
  minLines: 3,
  maxLines: 6,
)
```

### Textarea with Character Count

```dart theme={null}
HuxTextarea(
  label: 'Comments',
  hint: 'Enter your comments...',
  minLines: 4,
  maxLines: 8,
  maxLength: 500,
  showCharacterCount: true,
)
```

### Textarea with Validation

```dart theme={null}
HuxTextarea(
  label: 'Description',
  hint: 'Enter a description...',
  minLines: 3,
  maxLines: 6,
  helperText: 'Provide a detailed description',
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter a description';
    }
    if (value.length < 10) {
      return 'Description must be at least 10 characters';
    }
    return null;
  },
)
```

### Textarea with Error State

```dart theme={null}
HuxTextarea(
  label: 'Description',
  hint: 'Enter a description...',
  minLines: 3,
  maxLines: 6,
  errorText: 'Description is required',
)
```

## Properties

### Core Properties

* `label` - Optional field label text displayed above the textarea
* `hint` - Placeholder text displayed inside the textarea when empty
* `controller` - TextEditingController for managing input state
* `onChanged` - Callback triggered when the textarea value changes
* `onSubmitted` - Callback triggered when the user submits the textarea

### Validation Properties

* `validator` - Form validation function that returns error text or null
* `errorText` - Custom error message (overrides validator output)
* `helperText` - Helper text displayed below the textarea

### Behavior Properties

* `enabled` - Whether the textarea is interactive (default: true)
* `minLines` - Minimum number of text lines (default: 3)
* `maxLines` - Maximum number of text lines (default: 6)
* `maxLength` - Maximum character length
* `showCharacterCount` - Whether to show character count when maxLength is set (default: false)
* `keyboardType` - Type of keyboard to display
* `textInputAction` - Action button for the keyboard

### Layout Properties

* `width` - Custom width (default: full width)

## Styling & Dimensions

### Dimensions

* **Border Radius**: 8px (rounded corners)
* **Font Size**: 14px with 1.4 line height
* **Horizontal Padding**: 12px (compact padding for better text density)
* **Vertical Padding**: 12px

### Theme Support

* Automatically adapts to light and dark themes
* Uses HuxTokens for consistent theming
* Label uses FontWeight.w400 for lighter appearance

## Character Count

When `maxLength` is set and `showCharacterCount` is true, the textarea displays a character counter in the format "X / Y" at the bottom right. The counter updates dynamically as you type.

```dart theme={null}
HuxTextarea(
  label: 'Message',
  maxLength: 500,
  showCharacterCount: true,
)
```

## Examples

### Basic Form with Textarea

```dart theme={null}
Form(
  key: _formKey,
  child: Column(
    children: [
      HuxInput(
        label: 'Name',
        hint: 'Enter your name',
      ),
      const SizedBox(height: 16),
      HuxTextarea(
        label: 'Message',
        hint: 'Enter your message...',
        minLines: 4,
        maxLines: 8,
        maxLength: 1000,
        showCharacterCount: true,
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Message is required';
          }
          return null;
        },
      ),
    ],
  ),
)
```

### Disabled Textarea

```dart theme={null}
HuxTextarea(
  label: 'Notes',
  hint: 'This field is disabled',
  enabled: false,
  minLines: 3,
  maxLines: 6,
)
```

## Best Practices

* Use `minLines` to set the initial visible height
* Set `maxLines` to prevent the textarea from growing too large
* Use `showCharacterCount` when you have a `maxLength` to help users stay within limits
* Provide helpful `helperText` to guide users on what to enter
* Use validation to ensure data quality