Textarea

Stable v1.0.2

A multi-line text input with auto-resize and a character counter, so you don't have to write that logic again for every form.

Interactive Playground

Experiment with sizing, limits, and auto-resizing capabilities.

Configuration

Label Text

Placeholder

Element ID

Label Position

Top

Geometry & Limits

Rows

Max Length

Component Size

Small (sm)

CSS Resize (Ignored if Auto)

Vertical Only

Features

Auto-Resize Height

Show Counter

States

Required (*)

Toggle Error State

Disabled

Notes / Remarks

0 / 200

Live Source Code

<Textarea
  v-model="notes"
  id="notes-remarks"
  label="Notes / Remarks"
  placeholder="Enter your detailed notes here..."
  :maxLength="200"
  showCount
/>

Implementation Examples

Dynamic Comment Box

1. Auto-Resizing Container

By enabling autoResize, the textarea evaluates its own scrollHeight on every keystroke, hiding internal scrollbars and pushing surrounding content down naturally.

<Textarea v-model="comment" label="Dynamic Comment Box" autoResize :rows="2" />

Summary Description

101 / 150

2. Character Tracking

Passing a maxLength automatically tracks input length. The UI provides visual feedback, turning yellow at 90% capacity and red when maxed out.

<Textarea
  v-model="summary"
  label="Summary Description"
  :maxLength="150"
  showCount
  :rows="4"
/>

API Reference

Props

Name	Type / Signature	Default	Description
v-model	string	""	The bound string value of the textarea.
id	string	auto-generated	DOM id applied to the textarea and linked to the label. Falls back to a unique generated id when omitted.
label	string	undefined	Top or left-aligned input label.
labelPosition	"top" \| "left"	"top"	Alignment of the label relative to the textarea.
placeholder	string	""	Text shown when the textarea is empty.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"sm"	Dimensional size affecting padding and font size.
rows	number	3	The initial number of visible text lines.
autoResize	boolean	false	If true, automatically adjusts the height of the textarea to fit the content, removing scrollbars.
resize	"none" \| "vertical"	"vertical"	Controls the native CSS resize property. Height-only, so the field never overflows its full-width container. Ignored if autoResize is true.
maxLength	number	undefined	Native HTML maxlength. Prevents typing past this limit.
showCount	boolean	false	Displays a character counter at the bottom right. Automatically enabled if maxLength is provided.
disabled	boolean	false	Disables user interaction and grays out the component.
required	boolean	false	Appends a red asterisk to the label.
error	string \| boolean \| string[]	false	Applies red error styling and displays error message(s) below.

Events

Event Name	Payload Signature	Description
@input	(value: string)	Fired instantly upon keystroke changes.
@change	(value: string)	Fired when the textarea loses focus after its value was changed.
@focus	(event: FocusEvent)	Fired when the textarea receives focus.
@blur	(event: FocusEvent)	Fired when the textarea loses focus.