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### With `maxHeight`
70 
71Use the `maxHeight` option to cap the textarea height in pixels while keeping autosize behavior.
72 
73```vue
74<script setup lang="ts">
75import { useTextareaAutosize } from '@vueuse/core'
76 
77const { textarea, input } = useTextareaAutosize({
78  maxHeight: 180,
79  styleProp: 'minHeight',
80})
81</script>
82 
83<template>
84  <textarea
85    ref="textarea"
86    v-model="input"
87    class="resize-none"
88    placeholder="What's on your mind?"
89    rows="3"
90  />
91</template>
92```
93 
94## Type Declarations
95 
96```ts
97export interface UseTextareaAutosizeOptions extends ConfigurableWindow {
98  /** Textarea element to autosize. */
99  element?: MaybeRef<HTMLTextAreaElement | undefined | null>
100  /** Textarea content. */
101  input?: MaybeRef<string>
102  /** Maximum autosized height in pixels. */
103  maxHeight?: number
104  /** Watch sources that should trigger a textarea resize. */
105  watch?: WatchSource | MultiWatchSources
106  /** Function called when the textarea size changes. */
107  onResize?: () => void
108  /** Specify style target to apply the height based on textarea content. If not provided it will use textarea it self.  */
109  styleTarget?: MaybeRef<HTMLElement | undefined>
110  /** Specify the style property that will be used to manipulate height. Can be `height | minHeight`. Default value is `height`. */
111  styleProp?: "height" | "minHeight"
112}
113export interface UseTextareaAutosizeReturn {
114  textarea: Ref<HTMLTextAreaElement | undefined | null>
115  input: Ref<string>
116  triggerResize: () => void
117}
118export declare function useTextareaAutosize(
119  options?: UseTextareaAutosizeOptions,
120): UseTextareaAutosizeReturn
121```
122