Appearance
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.
The look is Basecoat's .textarea inside a .field (see Theme): a rounded-md box with a 1px --input border, an xs shadow, px-2.5 py-2 and text-sm, with the 3px --ring focus ring the input uses. Where upstream pins a flat min-h-16, mono derives the height from the control step — T + (rows - 1) x line — so a textarea starts its first line on the same baseline as an input beside it and reads as "one input tall, plus N-1 lines". Dark mode is built in.
Basic
Default textarea with label, placeholder and helper text.
Vue SFC
Sizes
Small, medium and large.
Vue SFC
Colors
Pick a colour and every variant takes it — all built-in colours, combined with 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
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 input and 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 colour, but an explicit --mono-textarea-ring-color (or the legacy -focus-color) always wins. To re-skin globally, set the underlying tokens (--input, --ring, --destructive …) — or switch flavor. Scroll areas use the shared --mono-scrollbar-* tokens.
| Variable | Default | Controls |
|---|---|---|
--mono-textarea-ring-color (alias -focus-color) / -ring-width / -ring-alpha | --ring / --mono-ring-width / --mono-ring-alpha | The focus ring (set by color) |
--mono-textarea-border-color (alias -rest-border) / -border-width | --input / --mono-border-width | Field border |
--mono-textarea-bg (alias -surface) | --mono-mode-surface (transparent, dark --input/30) | Field background |
--mono-textarea-shadow / --mono-textarea-radius | --mono-shadow-xs / --mono-radius-md | Field shadow and corner |
--mono-textarea-padding-x-<size> / --mono-textarea-padding-y | 2.5 × --mono-spacing at md / derived | Field padding (the Y is (T - line) / 2 - border) |
--mono-textarea-font-<size> / --mono-textarea-line-height | --mono-text-sm at md / --mono-leading-normal | Field type |
--mono-textarea-rows-<size> (or -rows) | 4 at md, 3 at xs/sm | How many lines the resting box shows |
--mono-textarea-height-<size> / --mono-textarea-min-height | --mono-control-height-<size> / derived | The T in the derivation, or an outright override |
--mono-textarea-resize | vertical (none while auto-resize) | The resize grip |
--mono-textarea-gap | 3 × --mono-spacing | Label ↔ field ↔ footer |
--mono-textarea-label-* / --mono-textarea-message-* / --mono-textarea-counter-font-size | --mono-text-sm / --mono-text-sm / --mono-text-xs | Label, message and counter type |
--mono-textarea-text / -placeholder / -muted | --foreground / --muted-foreground | Ink |
--mono-textarea-valid / -invalid / -warning | --success / --destructive / --warning | Validation colours |
--mono-textarea-filled-bg / -disabled-bg / -readonly-bg | --input/50 / — / --muted | The filled variant and the two read-only-ish states |
Deprecated and honoured as no-ops until 2.0: --mono-textarea-focus-rgb and every other *-rgb (use color-mix), --mono-textarea-underline-glow (the underlined variant rides the bottom edge now), --mono-textarea-background (use -bg), --mono-textarea-border (use -border-color).
Types
Import
import { 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' | 'teal' | 'purple' | 'neutral' | 'dark' | — | 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 | 'none' | 'invisible' | — | How it hides when `visible` is `false`. Defaults to `'none'`. |