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.

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

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.