Textarea

A multiline text field with a character count and status styles.

VerifiedSince 0.3.7

Usage

Basic

Loading demo...

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.

packages/tuffex/packages/components/src/textarea/index.ts