Autosize

A textarea component that automatically adjusts its height based on content. No need for manual drag-resizing — it expands and contracts as you type.

Basic Usage

Bind the text content via v-model. The height adjusts automatically as content grows.

Show Code

<script setup lang="ts">
import { ref } from 'vue'
import { TAutosize } from '@gulcc/tabler-vue'

const text = ref('')
</script>

<template>
  <TAutosize v-model="text" placeholder="Type something…" />
</template>

Rows

rows controls the minimum height (minimum number of visible lines). Default is 3.

Show Code

<TAutosize v-model="text" :rows="1" />
<TAutosize v-model="text" :rows="5" />

Max Rows

max-rows limits the maximum expansion height. A vertical scrollbar appears when the content exceeds this limit.

Show Code

<TAutosize v-model="text" :max-rows="3" />

Initial Content Auto-fit

The height adapts to existing content on mount.

Show Code

<TAutosize v-model="text" />

Disabled / Readonly

disabled prevents interaction, readonly allows copying but prevents editing. Height auto-adjustment still works in both states.

Show Code

<TAutosize v-model="text" disabled />
<TAutosize v-model="text" readonly />

API

Props

Prop	Type	Default	Description
v-model / modelValue	string	''	Current text content
placeholder	string	—	Placeholder text
rows	number	3	Minimum number of visible lines
max-rows	number	—	Maximum number of lines before scrollbar
disabled	boolean	false	Disable interaction
readonly	boolean	false	Read-only mode
maxlength	number	—	Maximum character count
name	string	—	Native name attribute
id	string	—	Native id attribute
required	boolean	false	Required for form validation

Emits

Event	Arguments	Description
update:modelValue	(value: string)	v-model update event
change	(value: string)	Fires when content changes