Component

Vue Auto-Resizing Textarea

<DomTextareaInput>

A multi-line field with shared form state and optional content-driven growth, including an optional maximum row limit.

Playground

Try every prop live

Textarea playground

Use rows as the starting height, enable autosize for content-driven growth, and set maxRows when the field should eventually scroll.

Bio

A short public summary.

Properties

Control props

Rows

Minimum visible rows, or the fixed row count when autosize is disabled.

AutosizeGrow and shrink the textarea to match its content.

Max Rows

Maximum autosized rows before vertical scrolling begins. Use 0 for no maximum.

Field props

Value

Current field value.

Optional ID override. By default parent forms derive the input ID from the field path using underscores.

Name

Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.

Label

Visible field label.

Description

Optional helper copy below the field.

Placeholder

Placeholder shown when the control is empty.

RequiredMark the field as required.

DisabledDisable field interaction.

Read OnlyShow the value but prevent editing.

InvalidMark the field invalid.

Errors

Validation errors for this field.

VisibleShow or hide the field.

Validators

No validators yet.

Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.

Validate On BlurRun validators when the field loses focus.

Chrome

Render default field chrome, or hide chrome while keeping form state wiring.

Playground.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomTextareaInput } from '@getdom/studio';

const data = reactive({
		"modelValue": "",
		"id": "",
		"name": "",
		"label": "Bio",
		"description": "A short public summary.",
		"placeholder": "Tell us about yourself…",
		"required": false,
		"disabled": false,
		"readOnly": false,
		"invalid": false,
		"errors": [],
		"visible": true,
		"validators": [],
		"validateOnBlur": true,
		"chrome": "field",
		"rows": 2,
		"autosize": true,
		"maxRows": 6
	});
</script>

<template>
	<DomTextareaInput
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Demo

Unlimited and bounded growth

The same autosize API supports continuous expansion or a fixed maximum before internal scrolling begins.

Unlimited growth

rows sets the minimum; omitting maxRows leaves growth uncapped.

Bounded growth

The textarea scrolls after reaching maxRows.

AutosizeTextarea.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomTextareaInput } from '@getdom/studio';

const unlimited = ref('This field keeps growing.\nAdd more lines to see it expand without a ceiling.');
const bounded = ref('This field grows to five rows.\nAfter that, its content scrolls inside the textarea.');
</script>

<template>
	<div class="grid w-full gap-5 md:grid-cols-2">
		<DomTextareaInput
			v-model="unlimited"
			label="Unlimited growth"
			description="rows sets the minimum; omitting maxRows leaves growth uncapped."
			autosize
			:rows="1"
		/>
		<DomTextareaInput
			v-model="bounded"
			label="Bounded growth"
			description="The textarea scrolls after reaching maxRows."
			autosize
			:rows="1"
			:max-rows="5"
		/>
	</div>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`rows`	number	number	3	Minimum visible rows, or the fixed row count when autosize is disabled.
`autosize`	boolean	boolean	false	Grow and shrink the textarea to match its content.
`maxRows`	number	number	0	Maximum autosized rows before vertical scrolling begins. Use 0 for no maximum.

Field props

Name	Type	TS	Default	Description
`modelValue`	any	any	''	Current field value.
`id`	string	string	''	Optional ID override. By default parent forms derive the input ID from the field path using underscores.
`name`	string	string	''	Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
`label`	string	string	''	Visible field label.
`description`	string	string	''	Optional helper copy below the field.
`placeholder`	string	string	''	Placeholder shown when the control is empty.
`required`	boolean	boolean	false	Mark the field as required.
`disabled`	boolean	boolean	false	Disable field interaction.
`readOnly`	boolean	boolean	false	Show the value but prevent editing.
`invalid`	boolean	boolean	false	Mark the field invalid.
`errors` ts `[ { name: "Validation name", message: "Error message", } ]`	array \| object \| string	Array<ErrorsItem `type ErrorsItem = { name?: string; // Name message?: string; // Message };` >	[]	Validation errors for this field.
`visible`	boolean	boolean	true	Show or hide the field.
`validators`	array	Array<unknown>	[]	Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
`validateOnBlur`	boolean	boolean	true	Run validators when the field loses focus.
`chrome`	'field' \| 'none' \| false	string	'field'	Render default field chrome, or hide chrome while keeping form state wiring.

Auto-generated from Textarea input.props and inline _edit hints.

Events

Name	Payload	Description
@update:modelValue	string	Fired when the text changes.
@focus	FocusEvent	Fired when the textarea receives focus.
@blur	FocusEvent	Fired when the textarea loses focus.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.