$refs Magic Property

Access elements marked with x-ref – an object of DOM nodes.

What is $refs?

$refs is a magic object containing references to all elements that have an x-ref attribute inside the current component. Each key corresponds to the ref name and holds the actual DOM node.

When to Use

Use $refs whenever you need direct access to a specific child element – focusing an input, reading a canvas context, measuring an element's size, or integrating with a vanilla JS library.

Basic Example

<div x-data>
  <input x-ref="myInput" type="text">
  <button @click="$refs.myInput.focus()">Focus input</button>
</div>

Multiple Refs

You can have as many refs as you like, and they are all available in the $refs object.

<div x-data>
  <canvas x-ref="canvas"></canvas>
  <input x-ref="searchBox" placeholder="Search">
  <button @click="
    $refs.searchBox.focus();
    console.log($refs.canvas.getContext('2d'))
  ">Activate</button>
</div>