Select all Checkbox

If you have a checkbox component state called something like “selected”, then make the master checkbox set a boolean variable which all the others can use to set their state.

Then when you check the master, use a conditional statement to set the variable depending on its current state (checked or unchecked). The variable then determines the state of the checkbox below it.

As an aside, to fully replicate this common web app behaviour, you’d also need to allow the checkboxes below it to be selected/unselected independently as well. Not sure how best to do that though without having to create a variable for each checkbox (so you’d end up with a lot of variables!)

You can make each checkbox add to the same variable. See the example below.

I think that solves a different problem to the one OP is referring to, but still ❤️

Thank you, this is what I was after. I will build it as you have it and learn.

what is the procedure to reach this result @Avokadomos ?

You can open up the prototype in editor to see how I’ve made the connections.

Hey,

can you maybe share the source file of this?
In Editor i cant view the variables and I do not understand how it works 😕

Not intuitive but if you open it in the prototype view mode and hit the top center “community demos” title it’ll drop down an option to view in editor. Hope that helps!

Not intuitive but if you open it in the prototype view mode and hit the top center “community demos” title it’ll drop down an option to view in editor. Hope that helps!

Well I did thst but there i can only see components and elements but not how the variables are set and operate? Or do i miss something?

Duplicate it to your own files for full access.

I tried this and was in design mode and did only see the error message by Figma.

Pasting unpublished variables across files does not create new lkocal variables yet.

So I assumed no variables have been transferred. I tried again in Prototype mode and now have them. Thank you : )

One component has 2 variants: Box unchecked, box checked.INteraction; change from one variant to the other. Now, You build another component with list of unchecked instances, this is your default variant, and a list of checked instances, this is your second variant. On top, you put a checked or unchecked instance, with the interaction of change from one variant of the list to the other.