Component

Textarea

<DomTextareaInput>

Multi-line text input with the same label/description chrome as the rest of the form components.

Playground

Try every prop live

Textarea playground

Edit props in the inspector — label, rows, and placeholder update live.

Bio

A short public summary.

Properties

Control props

Rows

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 false to render only the control while keeping form state wiring.

Playground.vuevue

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

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": 4
	});
</script>

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

Demo

Live preview

Bio

A short paragraph that appears under your name.

Usage

Vue

<script setup>
import { DomTextareaInput } from '@getdom/studio/vue';
import { ref } from 'vue';
const bio = ref('');
</script>

<template>
  <DomTextareaInput
    v-model="bio"
    label="Bio"
    description="A short paragraph that appears under your name."
    :rows="4"
  />
</template>

Props

Name	Type	Default	Description
v-model	string	''	Bound text value.
label	string	—	Label above the textarea.
description	string	—	Hint shown below the textarea.
rows	number	3	Number of visible rows.
placeholder	string	—	Placeholder text.
disabled	boolean	false	Disable the textarea.