Skip to main content
Jul 18, 2023 6:37 PM UTC
Solved

Select all Checkbox

How do I make a prototype with a master checkbox that affects the column of checkboxes below it.

This topic has been closed for replies.
Avokadomos
AvokadomosSolution
Figma Ambassador
Jul 26, 2023 1:06 PM UTC

Here’s another example without variables. I hope I understood it correctly now.

Disclosure: I’m part of Figma’s Forum Ambassador program.

14 replies

gilgongo
Jul 26, 2023 12:09 PM UTC

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!)

Avokadomos
Figma Ambassador
Figma Ambassador
Jul 26, 2023 12:26 PM UTC

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

Disclosure: I’m part of Figma’s Forum Ambassador program.
gilgongo
Jul 26, 2023 12:33 PM UTC

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

Avokadomos
Figma Ambassador
AvokadomosSolution
Figma Ambassador
Jul 26, 2023 1:06 PM UTC

Here’s another example without variables. I hope I understood it correctly now.

Disclosure: I’m part of Figma’s Forum Ambassador program.
Jul 26, 2023 1:47 PM UTC

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

Sep 20, 2023 2:28 PM UTC

what is the procedure to reach this result @Avokadomos ?

Avokadomos
Figma Ambassador
Figma Ambassador
Sep 22, 2023 7:17 AM UTC

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

Disclosure: I’m part of Figma’s Forum Ambassador program.
Kevin_Drescher
Sep 26, 2023 9:33 PM UTC

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 😕

Sep 26, 2023 10:19 PM UTC

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!

Sep 26, 2023 10:22 PM UTC

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!