'Action: Change State'

actionsstatesappearancevisualtoggle

The Change State action switches an element to a different visual state. States are predefined appearance configurations — each state can have different colours, opacity, size, text, and more. By switching between states, you can make elements respond visually to interactions.

Operations

Set

Switches the element directly to the specified state. If the element is already in that state, nothing changes.

Example: Set a button to the "Correct" state (green background, checkmark text) when the right answer is selected.

Toggle

Toggles between the default state and the specified state. If the element is in the default state, it switches to the target. If it's already in the target state, it switches back to default.

Example: Toggle a card between "Default" (face down) and "Revealed" (face up) on click.

Targeting

By default, the action targets the element it's attached to (self). You can also target a different element by selecting it from the dropdown. This lets one element control another's appearance — for example, clicking a button changes the colour of a separate indicator.

Scope: Local vs Global

  • Local (default): Only the triggering user sees the state change.
  • Global: Everyone sees the state change. Requires moderator or higher permissions.

Common Patterns

Answer Feedback

Create a quiz option with three states:

  • Default: Neutral appearance
  • Correct: Green background, "Correct!" text
  • Incorrect: Red background, "Try Again" text

On click, use a condition to check the answer and set the appropriate state.

Toggle Button

Create a button with two states:

  • Default: "Show Details" with a down arrow
  • Active: "Hide Details" with an up arrow

On click, toggle between states. Pair with a Layer action to show/hide the details content.

Step Progress

Create indicator dots for a multi-step process. Each dot has:

  • Default: Grey, small
  • Active: Blue, slightly larger
  • Complete: Green with checkmark

As the user progresses, set each dot's state accordingly.

Disabled State

Set an element to the Disabled state to indicate it cannot be interacted with. The disabled state typically has lower opacity and muted colours. Useful for preventing repeated submissions or showing unavailable options.

Tips

  • States are defined per element: Before you can use Change State, the target element must have the states configured in the States panel. See States System for how to set up states.
  • Combine with conditions: Use conditions to make state changes contextual — only change to "Correct" if $answer == "right".
  • Chain state changes: Use action chaining to change multiple elements' states in sequence — update the answer element, then update the score display, then update the progress indicator.

What's Next?