el & $refs - Magic Properties in Alpine.js

From the Alpine.js cheat sheet · Advanced Features · verified Jul 2026

$el & $refs - Magic Properties

Access special Alpine.js magic properties

html
<div x-data>
  <!-- $el - Current element -->
  <button @click="$el.remove()">
    Remove This Button
  </button>

  <!-- $refs - Element references -->
  <input x-ref="email">
  <button @click="$refs.email.focus()">
    Focus
  </button>
</div>
✅ $el references the current component root element
💡 $refs accesses all elements with x-ref
🔍 Other magic: $watch, $dispatch, $nextTick, $store
⚡ Use $ prefix for all Alpine magic properties
magic-properties$el$refs$watch$dispatch

More Alpine.js tasks

Back to the full Alpine.js cheat sheet