Textarea

WxTextarea is the multi-line sibling of WxInput: same states, same form integration, plus autosizing and a character counter.

Fixed rows, counter

WebX UI is a Vue 3 design system for admin panels.50/200

Autosize between 2 and 6 rows

States

Invalid value

Read-only

Usage

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <wx-textarea v-model="summary" :rows="4" :maxlength="200" show-count />
</template>

Autosize

autosize grows the field with its content. Bound it to keep a long text from taking over the page — past maxRows the field scrolls instead of growing:

<template>
  <wx-textarea v-model="notes" :autosize="{ minRows: 2, maxRows: 6 }" />
</template>

While autosizing, manual resizing is switched off — the two fight each other otherwise.

Placeholders

The same as Input: tokens turns on the list on [, the button in the top corner and the chips. The mirror wraps where the textarea wraps and scrolls with it, and the list opens under the line being typed rather than under the field.

Props

Prop	Type	Default	Description
modelValue	string	''	v-model value
rows	number	3	Visible rows when autosize is off
autosize	boolean | { minRows?: number; maxRows?: number }	false	Grows with the content
maxlength	number	—	Native maxlength
showCount	boolean	false	Renders current / max (needs maxlength)
resize	'none' | 'vertical' | 'both'	'vertical'	Manual resize handle
size	'sm' | 'md' | 'lg'	'md'	Font size
status	'default' | 'success' | 'warning' | 'error'	'default'	Validation state
placeholder	string	—	Placeholder text
disabled	boolean	false	Disables the field
readonly	boolean	false	Read-only field
id	string	generated	Overrides the id the label points at; WxFormItem supplies one
ariaLabel	string	—	Label when there is no visible one
tokens	TokenOption[]	—	Placeholders to suggest on [, list from the button and draw as chips
tokensTitle	string	'Placeholders'	Heading of the list the button opens
tokensLabel	string	'Insert a placeholder'	Name and tooltip of the button

Events: update:modelValue (string), input (string), change (string), focus, blur.

Exposed: focus(), blur(), select(), and textarea — a ref to the native element.

Unknown attributes fall through to the <textarea>, not the wrapper. class and style are the two that stay on the wrapper — see Input for why.

Accessibility

Inside a WxFormItem the id, error state and aria-describedby are wired automatically. Standalone, give it an ariaLabel.