Course lesson

Implement a State Machine Action for Setting Input Focus in Zag.js

Now that we have a machine and our UI is sending it events, we need to actually do something with events that are sent. This is where actions come into play.

Duration
3 min
Access
Free
Transcript
Retained from source evidence

Now that we have a machine and our UI is sending it events, we need to actually do something with events that are sent. This is where actions come into play.

We'll implement focus and blur events for the input by setting the context focusedIndex to the index that is coming in from the UI. We can mutate context directly in Zag.js because it handles mutations through proxies to stay reactive.