Events & Actions

Every component has an events tab, where you can add a sequence of actions to occur after a given event. Many actions have a specific purpose and setup flow, so which you use and in what circumstances will depend heavily on your use case. Below are a few of the broader tips and general overview of how they work.

Events vs Actions

An event is something that begins a sequence of actions. Such as a user hovering or clicking on a component. Actions are each of the steps that run when that event occurs.

Adding Actions

On any component, open the events tab and click the + next to the event you want to create an action for.

⁠

Multiple / Series Actions

To create multiple actions in a series just add each action then drag them into the correct order. Each action will wait for the previous one to complete first before running, so any actions setting variables will be ready for the subsequent actions to reference the updated value.

Actions will run in sequence with each needing to complete succesfully for the next to begin.

Input Validation

When submitting a form it’s common to apply validation to make sure field are filled correctly before allowing the user to proceed. However in some cases, you may want to prevent the user running any actions (not only submitting the form) such as in the case of multistage forms - where the button is taking the user to another stage of the form. For this reason - we apply input validation on the event rather than the actions that it triggers.

⁠

⁠

Conditional Actions

You can make actions only apply under certain conditions by switching to a conditional state before adding them. When an action is conditional it will be shown in a group with any other actions under the same condition. Although this works, its almost always the case that you want to change the appearance of the component also. In that case, rather than applying conditional actions, we recommend you duplicate the component and apply a different set of actions to each. Then use conditions to show or hide the relvant component.

It’s generally a better practice to have two different components, and conditionally show or hide them.

On Change (Events)

Some types of components (typically inputs) have additional events such as on change - where an action can be fired after a short delay when the user makes a change in the input.

Events vs Actions

Adding Actions

Multiple / Series Actions

Input Validation

Conditional Actions

On Change (Events)

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.