Bind Data to Form Elements: x-model
Explore how to use the AlpineJS x-model directive to bind user input data to form elements including text fields, checkboxes, radios, and selects. Understand two-way binding and how to use modifiers like .number, .lazy, .debounce, and .throttle to control data updates.
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:
...