How to make textarea auto-resize with Alpine.js

January 24, 2021

You know those fancy textareas that make themselves shorter or taller depending on how much you type? That's actually really easy to do with Alpine.

Resizing a textarea to be the height of its text turns out to be quite straightforward: first, set the textarea's height to almost nothing, then set the textarea's height to the height of the content that's not visible.

$el.style.height = '5px'
$el.style.height = $el.scrollHeight + 'px' // e.g. 152 + 'px' = '152px'

With Alpine, $el is a magic variable for the element with the x-data.

We start by setting this as a function on our Alpine component, so we can reuse this function:

<textarea
  x-data="{ resize: () => { $el.style.height = '5px'; $el.style.height = $el.scrollHeight + 'px' } }"
></textarea>

Now, we simply tell Alpine to run this resizing function when the textarea first loads, and whenever someone types in the text box:

<textarea
  x-data="{ resize: () => { $el.style.height = '5px'; $el.style.height = $el.scrollHeight + 'px' } }"
  x-init="resize()"
  @input="resize()"
></textarea>

And that's it! The textarea will now resize to be the height of the text you type in it. Here's a CodeSandbox demonstrating the solution.

A quick favor: was anything I wrote incorrect or misspelled, or do you still have questions? Please use this form to let me know or ask for help!