Playground
PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

Textarea (auto-resize)

A textarea form input element that automatically resizes to fit the content.

+ Tailwind and Alpine

Copied!
<div class="w-full max-w-xs mx-auto">
    <textarea x-data="{ 
                resize () { 
                    $el.style.height = '0px'; 
                    $el.style.height = $el.scrollHeight + 'px' 
                } 
            }"
            x-init="resize()"
            @input="resize()"
            type="text" 
            placeholder="Type your message here. I will resize based on the height content." 
            class="flex w-full h-auto min-h-[80px] px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
    ></textarea>
</div>

Data

Below you will find the data properties available in the x-data attribute of this element.


Property and Description
resize()
This is the method that will resize the textarea. It is called on initialization and every time the content in the textarea is updated.

More Examples

Below you will find more Textarea (auto-resize) examples you may wish to use in your projects.


Copied!
<div class="relative w-full max-w-xs mx-auto">
    <textarea x-data="{ 
            resize () { 
                $el.style.height = '0px'; 
                $el.style.height = $el.scrollHeight + 'px' 
            } 
        }"
        x-init="resize()"
        @input="resize()"
        type="text" 
        placeholder="Type your message here. I will resize based on the height content." 
        class="flex relative z-20 peer w-full h-auto min-h-[80px] px-3 py-2 text-sm bg-white border-2 border-neutral-900 placeholder:text-neutral-500 focus:text-neutral-800 focus:border-neutral-900 focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50"
    ></textarea>
    <div class="absolute inset-0 z-10 w-full h-full -m-1 duration-300 ease-out translate-x-2 translate-y-2 bg-black peer-focus:m-0 peer-focus:translate-x-0 peer-focus:translate-y-0"></div>
</div>