Change button when a checkbox is used

Hey all,

I’m working on a prototype, where I want to change the state of the button when the checkbox is ticked and to change back when it’s not checked.

I’ve managed to get it to change when the checkbox is ticked, but not the other way. I’ve attached the variable I wrote and the prototype script as well.

If animation is not an issue, you can use variables for it:

  1. Create a local variable “Consent Given” for your prototype.
  2. In the checkbox component, add another interaction to the OnClick transition (by selecting the interaction in Prototype mode and selecting the + button). Select “Set Variable” and set “Consent Given” to true.
  3. Do the same for the backwards transition but set “Consent Given” back to false.
  4. Name the button component variants “Button Active=true” and “Button Active=false”
  5. On the button instance in the page, assign the “Consent Given” bool variable to the button’s “Button Active” state (via the button that looks like a hexagon with a dot in the middle, that appears when hovering over the “Button Active” property).

→ That should create a “Consent Given” variable that switches from true to false when you check and uncheck the checkbox. The button should change its state based on that. Afaik, animation is not possible with that setup.

1 Like

There are likely multiple ways to go about this, but here is another approach, using “if” conditionals to change the checkbox and button states.

View Prototype
View File

1 Like