Ben Borgers

How to make textarea auto-resize with Alpine.js

December 30, 2020

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.

More blog posts

Subscribe to my newsletter for a monthly round-up of new blog posts and projects Iā€™m working on!

Twitter ↗ RSS feed ↗