Ben Borgers

⇢ Twitter

How to make textarea auto-resize with Alpine.js

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.

$ = '5px'
$ = $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:

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

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

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

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.


Last updated January 24, 2021