x-model - Two-Way Binding in Alpine.js

From the Alpine.js cheat sheet · Directives - User Interaction · verified Jul 2026

Bind form inputs to data with automatic sync

html

<div x-data="{ message: 'Hello' }">
  <input type="text" x-model="message">
  <p x-text="message"></p>
</div>

✅ Two-way binding: input changes update data and vice versa

💡 Works with text, checkbox, radio, select elements

🔍 Modifiers: .lazy (on change), .number, .debounce

⚡ Automatically handles different input types correctly

x-modelformsbindinginput

More Alpine.js tasks