1---
2category: Browser
3---
4 
5# useTextareaAutosize
6 
7Automatically update the height of a textarea depending on the content.
8 
9## Usage
10 
11### Simple example
12 
13```vue
14<script setup lang="ts">
15import { useTextareaAutosize } from '@vueuse/core'
16 
17const { textarea, input } = useTextareaAutosize()
18</script>
19 
20<template>
21  <textarea
22    ref="textarea"
23    v-model="input"
24    class="resize-none"
25    placeholder="What's on your mind?"
26  />
27</template>
28```
29 
30::: info
31 
32It's recommended to reset the scrollbar styles for the textarea element to avoid incorrect height values for large amounts of text.
33 
34```css
35textarea {
36  -ms-overflow-style: none;
37  scrollbar-width: none;
38}
39 
40textarea::-webkit-scrollbar {
41  display: none;
42}
43```
44 
45:::
46 
47### With `rows` attribute
48 
49If you need support for the rows attribute on a textarea element, then you should set the `styleProp` option to `minHeight`.
50 
51```vue
52<script setup lang="ts">
53import { useTextareaAutosize } from '@vueuse/core'
54 
55const { textarea, input } = useTextareaAutosize({ styleProp: 'minHeight' })
56</script>
57 
58<template>
59  <textarea
60    ref="textarea"
61    v-model="input"
62    class="resize-none"
63    placeholder="What's on your mind?"
64    rows="3"
65  />
66</template>
67```
68 
69## Type Declarations
70 
71```ts
72export interface UseTextareaAutosizeOptions extends ConfigurableWindow {
73  /** Textarea element to autosize. */
74  element?: MaybeRef<HTMLTextAreaElement | undefined | null>
75  /** Textarea content. */
76  input?: MaybeRef<string>
77  /** Watch sources that should trigger a textarea resize. */
78  watch?: WatchSource | MultiWatchSources
79  /** Function called when the textarea size changes. */
80  onResize?: () => void
81  /** Specify style target to apply the height based on textarea content. If not provided it will use textarea it self.  */
82  styleTarget?: MaybeRef<HTMLElement | undefined>
83  /** Specify the style property that will be used to manipulate height. Can be `height | minHeight`. Default value is `height`. */
84  styleProp?: "height" | "minHeight"
85}
86export interface UseTextareaAutosizeReturn {
87  textarea: Ref<HTMLTextAreaElement | undefined | null>
88  input: Ref<string>
89  triggerResize: () => void
90}
91export declare function useTextareaAutosize(
92  options?: UseTextareaAutosizeOptions,
93): UseTextareaAutosizeReturn
94```
95