x-bind - Bind Attributes in Alpine.js

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

x-bind - Bind Attributes

Dynamically bind HTML attributes (shorthand: :)

html

<div x-data="{ isActive: true }">
  <!-- Longhand -->
  <div x-bind:class="isActive ? 'active' : ''">Content</div>

  <!-- Shorthand : (recommended) -->
  <div :class="isActive ? 'active' : ''">Content</div>
</div>

✅ : is shorthand for x-bind: (use : for cleaner code)

💡 Class binding accepts object syntax for multiple classes

🔍 Can bind any HTML attribute: href, src, disabled, etc.

⚡ Use x-bind (no attribute) to spread multiple attributes

x-bindattributesclassstyle:

More Alpine.js tasks

x-on - Event Listeners
x-model - Two-Way Binding

Back to the full Alpine.js cheat sheet