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>

saim ansari