Show/hide elements onclick if checkboxes are checked

Hi, I’m pretty new to Figma and need some help please. :pray:
I’m trying to create a prototype that has multiple checkboxes independently relating to different areas/regions that if when a “view” button is clicked all of those that are checked/true show and those that aren’t hide. I have set up all checkboxes as true, and have given each a separate name. I have also added conditionals to the view button that’s
-onclick if “xxx” checkbox is true,set variable show “xxx” region to true
else set variable “”region” to false.
Hope that’s all clear to understand. Any advice? Thanks

1 Like

Hi there,

hanks for reaching out! Your approach sounds solid. I’ve come across a community resource that might be really helpful for you:

This resource covers prototype settings related to checkbox actions. I believe you could apply the same logic to your project.

I hope this is useful, but if you have any more questions, please don’t hesitate to ask. I’m here to help!


Hi, thank you for replying. I took a look at that but that’s not really what I was looking for. I am having issues with the interactions being nested I think… not sure. What I am trying to solve is that when a checkbox is checked (on click), another element is shown, when it’s not checked it is hidden. I can get it to work in one direction but the checkbox doesn’t seem to change back. Is this due to its nesting? Currently, i have the interaction as on click and change to for the checkbox but alas this isnt working. Any other advice? Thanks in advance.

Hi there,

I apologize for the delay in following up. If you have not yet found a solution, could you possibly provide us with the file link so that we can investigate?


I just submitted a bug report for a very similar issue today! In my case it’s a series of mega menus hidden in a global navigation. I’m using the same logic as you. An extra problem I’m experiencing is that my text overrides are being lost on click.

I’ll report back here with what I hear from Figma support.

Did anyone find a solution to this? I’m also trying to do this, but failing.

@Paul_Harvey you can show/hide elements by creating a boolean that is applied on what you want to hide/show.

For the checkbox, i created the states(unchecked/checked), and for each variant state i gave an interaction to change to state and change the boolean so the elements will hide/show.

When you place the variable interactions on the the checkbox states, you make sure each state does what it needs to do.