...

/

Bind Data to Form Elements: x-model

Bind Data to Form Elements: x-model

Learn to bind data to form inputs using x-model.

We'll cover the following...

Collecting user input isn’t an easy thing in web development. However, AlpineJS simplifies it with the x-model directive, which allows us to bind the values of form fields to AlpineJS data.

Bind data to text inputs

To bind data to text inputs, we have two options. We either use <input type="text"> for single-line text or textarea for multiple lines of text.

We use x-model on input:

The syntax to bind a piece of data to a textarea is similar:

In line 7 in both cases, when we type into the ...