Using number variables to control the state of other components? Is it possible?

Hi @Kashish_Naidu1

This is doable

You need at least two variables :

1. tags selected number : it will count the number of tag selected
2. disable tags : it will toggle every tag in a disabled state whenever your tags selected number reach the maximum tags allowed (3 in your case)

Tag component need to have a boolean property in order to toggle itself between available and disable state.

Hope it helps

Could you record video in Presentation mode? It seems to me that your solution does not match the author’s question. Note that the example uses 3 states (disabled, not selected, selected).

I’ll do you one better, here is the link of the prototype Figma prototype : tag list item disabling

Note that the example uses 3 states (disabled, not selected, selected).

I cut the selected state of my component part out on my screenshot, to focus on the main thing, because it looks like they got this part figured out.

Oh, great catch. Thanks for sharing. I originally thought about creating as many variable modes as there are instances. And you made it much easier by using 4 variants.

Hi, I was following this post as I’m trying to build something similar, so thanks for sharing this! I didn’t quite get it though, could you share a screenshot of your interactions and the variables, that would be great!

For context, this is what I’m trying to build:
A card component that has a small variant and a full-screen one.

So if I have a scrollable feed of distinct cards of the small variant and click on of them I want that one to change to full screen and all of the others to disappear (or to also change to full screen but align in a vertical feed in the same order as they were)

Hi @Haroll

Thank you for sharing your workflow! Is it possible to build a radio button menu using a similar approach? I am trying to build it inspired by your workflow, with the difference that the button has the additional hover state along with the default and the selected.

Hi @Marius_Calude,

I’m assuming that you want a list of radio button and when on is checked, all the others become unchecked?
In that case, yes it’s quiet the same things : the boolean variable must be applied to the property of your component triggering its state change (in this case the check status)
As for the hover state it shouldn’t be a problem, it just some extra-step to account for the hover state :

• add a “while hovering” trigger on the component’s default state
• add the “on click” trigger on the hover state

Thank you @Haroll for your quick reply. Here’s what I have set up on the hover state on click trigger:

Wow, i just checked back in this thread after a while. Can’t wait to try these solutions, thanks!

It’s so annoying that I can’t make it work and mine is so much simpler. I just want the counter on the title decrease 1 number unit if a checkbox on the list below is unchecked and to go up 1 if it’s checked. It worked once and I have changed the UI now it’s not anymore and it’s driving me insaaaane. The variables are there, are connected to the title, the action is set to when the click is made, even when there’s a hoover state… BY the way, when it hovers it works 😭

There’s a hovering state in between that breaks things… what I did was:
I have a design system where the interaction happens - default → while hovering → click → check. I set the action to happen on the click and it doesn’t work, if I put the action on the hovering it does work, so apparently the action can’t go one state further by itself