How to Set and Reset Value of Textarea in AlpineJS

In this section, you will learn how to set values in form inputs or text areas using Alpine.js. First, initialize the component by using x-data. Then, define an empty value like input: ”. After that, set the x-text value on the text area to display the result.

Now, you need to click the buttons to set the value. As you can see in the code below, the “Set value” button will display the result, while the “Clear value” button will reset the value.

<div class="flex justify-center mt-8">
    <div x-data="{ input : '' }">
        <textarea class="p-2 text-sm border-2 rounded-md focus:border-blue-400" x-model="input"
            placeholder="Enter your text here..."></textarea>
        <div class="flex gap-4 mt-2">
            <button @click="input= 'Problems are not stop signs, they are guidelines'"
                class="p-2 text-white bg-green-500 hover:bg-green-600 rounded-md">Set Value</button>
            <button @click="input= ''" class="p-2 text-white bg-gray-500 hover:bg-gray-600 rounded-md">Clear
                Value</button>
        </div>
    </div>
</div>
alpinejs Set and Reset
saim ansari
saim ansari

I'm Saim Ansari, a full-stack developer with 4+ years of hands-on experience who thrives on building web applications that leave a lasting impression. When it comes to tech, I'm particularly adept at Laravel, React, Tailwind CSS, and the Tall Stack