ContextQMD
Back to Vueuse

useTextareaAutosize

packages/core/useTextareaAutosize/index.md

14.3.01.6 KB
Original Source

useTextareaAutosize

Automatically update the height of a textarea depending on the content.

Usage

Simple example

vue
<script setup lang="ts">
import { useTextareaAutosize } from '@vueuse/core'

const { textarea, input } = useTextareaAutosize()
</script>

<template>
  <textarea
    ref="textarea"
    v-model="input"
    class="resize-none"
    placeholder="What's on your mind?"
  />
</template>

::: info

It's recommended to reset the scrollbar styles for the textarea element to avoid incorrect height values for large amounts of text.

css
textarea {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

textarea::-webkit-scrollbar {
  display: none;
}

:::

With rows attribute

If you need support for the rows attribute on a textarea element, then you should set the styleProp option to minHeight.

vue
<script setup lang="ts">
import { useTextareaAutosize } from '@vueuse/core'

const { textarea, input } = useTextareaAutosize({ styleProp: 'minHeight' })
</script>

<template>
  <textarea
    ref="textarea"
    v-model="input"
    class="resize-none"
    placeholder="What's on your mind?"
    rows="3"
  />
</template>

With maxHeight

Use the maxHeight option to cap the textarea height in pixels while keeping autosize behavior.

vue
<script setup lang="ts">
import { useTextareaAutosize } from '@vueuse/core'

const { textarea, input } = useTextareaAutosize({
  maxHeight: 180,
  styleProp: 'minHeight',
})
</script>

<template>
  <textarea
    ref="textarea"
    v-model="input"
    class="resize-none"
    placeholder="What's on your mind?"
    rows="3"
  />
</template>