Textarea

A multi-line text input with sizes, color and visual variants, validation states, slot-overridable label and helper, JS-driven auto-resize, and an optional character counter. Toggle Vue / CSS to switch the live demo and source together.

Basic

Default textarea with label, placeholder and helper text.

Vue SFC

Sizes

Small, medium and large.

Vue SFC

Variants

outlined, filled and underlined.

Vue SFC

Colors

All built-in color variants.

Vue SFC

States

Disabled, readonly and required.

Vue SFC

Validation

valid, invalid and warning states with messages.

Vue SFC

Auto resize

Grow with content between min-rows and max-rows.

Vue SFC

Counter

Live character count via show-counter and max-length.

Vue SFC

Slots

Custom label and helper content via named slots.

Vue SFC

Event log

Live log of mno-input and mno-change events.

Vue SFC

Customized

Override per-element styling with cssClass (Vue) or extra utility classes (CSS).

Vue SFC

Width & height

Set width, height, min-width, max-width, min-height or max-height — each takes a CSS string ("320px", "80%") or a number (px). Fields are full width by default; set width to constrain.

Vue SFC

Types

Importimport { TextareaProps } from 'mono-helper'

Prop	Value	Default	Description
modelValue	string	''	Two-way bound text value of the textarea.
value	string	''	Text value (kept in sync with modelValue).
name	string	''	Form field name for the underlying textarea.
placeholder	string	''	Placeholder text shown when empty.
label	string	''	Text label shown above the textarea.
helperText	string	''	Helper text shown below the textarea.
validationState	'warning' | 'default' | 'valid' | 'invalid'	'default'	Validation state controlling field styling.
validationMessage	string	''	Message shown for the current validation state.
errorMessage	string	''	Error message that forces the invalid state.
successMessage	string	''	Success message that forces the valid state.
size	'sm' | 'md' | 'lg'	'md'	Size of the textarea.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'	'primary'	Color theme of the textarea.
variant	'underlined' | 'outlined' | 'filled'	'outlined'	Visual style of the textarea.
disabled	boolean	false	Disables interaction with the textarea.
readonly	boolean	false	Makes the textarea read-only.
required	boolean	false	Marks the field as required.
autofocus	boolean	false	Focuses the textarea on first render.
autoResize	boolean	false	Automatically grows the height to fit content.
rows	number	—	Initial number of visible text rows.
minRows	number	—	Minimum number of rows when auto-resizing.
maxRows	number	—	Maximum number of rows when auto-resizing.
minLength	number	—	Minimum allowed character length.
maxLength	number	—	Maximum allowed character length.
showCounter	boolean	false	Shows a character counter below the field.
ariaLabelText	string	—	Accessible label for screen readers.
ariaLabel	string	—	—
width	string | number	—	Explicit sizing. Each accepts a CSS length string (`"320px"`, `"80%"`) or a number (interpreted as px). Use `width="100%"` for a full-width field.
height	string | number	—	—
minWidth	string | number	—	—
maxWidth	string | number	—	—
minHeight	string | number	—	—
maxHeight	string | number	—	—
cssClass	TextareaCssClass	{}	Per-part class overrides for styling internal elements.