1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    alpineAlpine.js

    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.