---
title: Textarea
description: A multiline text field with a character count and status styles.
category: Form
status: beta
since: 0.3.7
tags: [textarea, form, multiline]
syncStatus: reviewed
verified: true
---

## Usage

### Basic
::::TuffDemoWrapper{demo="TextareaTextareaDemo" code-lang="vue"}
---
code: |
  <script setup lang="ts">
  import { ref } from 'vue'

  const value = ref('')
  </script>

  <template>
    <TxTextarea
      v-model="value"
      placeholder="Write the release review note..."
      :max-length="160"
      show-count
      :status="value.trim() ? 'success' : 'error'"
    />
  </template>
---
::::

### Best Practices

- Pair `maxLength` with `showCount` for bounded notes, summaries, and prompts.
- Keep `resize="vertical"` in ordinary forms; use `none` only when the layout already controls height.
- Treat `status` as a visual hint; keep labels, help text, and validation messages in the surrounding form item.

## API Reference

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `modelValue` / `v-model` | `string` | `''` | The text value. |
| `placeholder` | `string` | `''` | Placeholder text. |
| `rows` | `number` | `4` | Native row count. |
| `disabled` | `boolean` | `false` | Native disabled state. |
| `readonly` | `boolean` | `false` | Native read-only state. |
| `maxLength` | `number` | - | Native maximum length, also the count's denominator. |
| `showCount` | `boolean` | `false` | Shows the character count; `current/max` when `maxLength` is set. |
| `resize` | `'none' \| 'vertical' \| 'horizontal' \| 'both'` | `'vertical'` | CSS `resize` behavior. |
| `status` | `'default' \| 'success' \| 'error'` | `'default'` | Visual validation state. |

### Events

| Event | Params | Description |
|------|--------|-------------|
| `update:modelValue` | `(value: string)` | Fires on input. |
| `input` | `(value: string)` | Fires together with `update:modelValue`. |
| `focus` | `(event: FocusEvent)` | Native focus event. |
| `blur` | `(event: FocusEvent)` | Native blur event. |

### Exposed Methods

| Method | Description |
|------|-------------|
| `focus()` | Focuses the native textarea. |
| `blur()` | Blurs the native textarea. |
| `textareaRef` | Ref to the native textarea. |

## Overview

- `class` and `style` stay on the root; other attrs (such as `id` and `name`) pass through to the inner `<textarea>`.

## Technologies

- Source: `packages/tuffex/packages/components/src/textarea/`; exports the `TxTextareaInstance` type.

<TuffDocSourceLink />