Introduction to interactions and state

This page will introduce you to interactions and state, and how they can be used to create dynamic, interactive user experiences.

What is state?

User interfaces often need to change what’s displayed as a result of user interaction. Clicking a collapsed FAQ section should expand to reveal the full content, clicking “Next” on an image carousel should switch the shown image, clicking a tab should swap out the content, typing text into a search input should filter the list of results, and so on. Therefore, components need to store state, data used to keep track of whether the FAQ section is expanded, which image is shown, which tab is shown, what the filter text is, and so on.

More generally, state is any data that may change in a UI.

Using interactive components

Interactive components—starting with basic ones like checkboxes and text inputs—have some state that changes as the user interacts with it—like whether the checkbox is checked, or what text is in the input. Plasmic lets you access that state.

Here’s a quick tour.

Insert a Switch:

Now, you can control another element’s visibility based on the state of that Switch:

Now interact with it:

As another example, insert a text input:

Now, set the “search” prop of a Product Collection component to match the state of that text input.

And now you can interactively filter the products:

You can create your own stateful components in addition to the ones we showed above.

In the following video, we will go through the above examples in more depth:

  1. Show and hide an element by connecting its visibility to a switch
  2. Filter a collection of products by connecting a text input

Play with the demo project used in the video.

Adding interactions

An interaction is a sequence of actions that can be triggered by a component.

Here’s a quick tour.

You can add a click interaction to clear the text input from earlier:

Try the resulting interaction:

For another example, make a button flip between different variants of your page:

This foundation applies to a wide range of use cases, including small everyday features like switching gallery images on hover.

Or a calculator for your pricing page or purchase page:

And it scales to building complex apps.

In the following video, we will:

  1. Reset a text input when a button is clicked
  2. Change a variant when a tab is clicked
  3. Build a counter
  4. Run custom JavaScript code
  5. Use other interaction trigger types

Play with the demo project used in the video.

More examples

You can check out some more varied and advanced examples of using state and interactions in this project:

Interactions demo project

Next steps

Try out interactions for yourself with the interactions tutorial.

Was this page helpful?

Give feedback on this page