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.

underlined focuses with a soft glow under the line rather than a ring around the field — tune it with --mono-textarea-underline-glow (default 0 5px 6px -6px).

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

CSS Variables

Vue SFC

Every textarea is themed through --mono-textarea-* custom properties. Setting one on the element, on any wrapper/ancestor, or inline all work — custom properties inherit, and they pierce the shadow-DOM boundary, so the same overrides apply to <mono-textarea> and the shadow build. The color prop sets the focus accent, but an explicit --mono-textarea-focus-color override always wins. To re-skin globally, set the underlying --theme-* tokens.

Variable	Default	Controls
--mono-textarea-focus-color	--theme-primary	Focus border color (set by color)
--mono-textarea-focus-rgb	primary rgb	Focus ring color (as r, g, b)
--mono-textarea-underline-glow	0 5px 6px -6px	Underlined focus glow geometry
--mono-textarea-text	--theme-text	Field + label text color
--mono-textarea-border	--theme-border	Field border color
--mono-textarea-background	--theme-background	Field background (filled/default)
--mono-textarea-surface	--theme-surface	Field background (outlined)
--mono-textarea-placeholder	--theme-placeholder	Placeholder color
--mono-textarea-shadow	0 1px 2px …	Field shadow
--mono-textarea-success	--theme-success	Valid-state color
--mono-textarea-danger	--theme-danger	Invalid / required color
--mono-textarea-warning	--theme-warning	Warning-state color

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'	—	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	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	—	Size of the textarea.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'	—	Color theme of the textarea.
variant	'underlined' | 'outlined' | 'filled'	—	Visual style of the textarea.
disabled	boolean	—	Disables interaction with the textarea.
readonly	boolean	—	Makes the textarea read-only.
required	boolean	—	Marks the field as required.
autofocus	boolean	—	Focuses the textarea on first render.
autoResize	boolean	—	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	—	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.
visible	boolean	—	Whether the control is shown. Defaults to `true`.
visibleType	'invisible' | 'none'	—	How it hides when `visible` is `false`. Defaults to `'none'`.