Focus an input field on button click with `x-ref` and the `$refs` property in Alpine JS

Share this video with your friends

Send Tweet

In this lesson, we learn how to retrieve a DOM element via the x-ref directive in Alpine JS, which gives us a reference to the element it is applied on. In our case, an input field.

We can then use the $refs object, and reach for the ref we need to target.

This allows us to trigger the focus state of the input field, with the .focus() method.