x-ref - Element References in Alpine.js

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

Reference DOM elements within your component

html

<div x-data>
  <input x-ref="username" type="text">

  <button @click="$refs.username.focus()">
    Focus Input
  </button>
</div>

✅ Access elements via $refs magic property

💡 No need for getElementById or querySelector

🔍 Scoped to component - no global pollution

⚡ Useful for focusing inputs, measuring elements, etc.

x-refrefsdomelements

More Alpine.js tasks