Boolean properties - how to turn one boolean off when turning another on?

Hello, i saw somewhere someone create a toggle (boolean) to turn a property on or off e.g show icon or hide icon, and on toggling that boolean, another toggle would switch off.

I was wondering if anyone has done this and where i can go to learn how to do it.
It would be v helpful.

Another example:
I have two property boolean switches.

One is to show/hide an orange pin.
One is to show/hide a grey pin.

I would never show both at the same time.
How can i create a condition whereby if i decide to toggle and show the orange pin, it automatically switches the other boolean toggle and switches grey pin off?

Hi @Ming_Liu, Thank you for reaching out about boolean properties. It’s wonderful to hear that you’re looking for learning materials, and I’ll do my best to assist you!

I understand that you have a component set with two boolean properties. If you already have properties on your component set, using the [Change to] action could be an option to show/hide orange and gray pins.



Here are some resources that you might find useful:

If you’d like to delve deeper into conditional logic, please refer to the following:

I hope you find these resources helpful, but I may have overlooked something. In that case, could you please tell us more? Would you mind sharing a quick video recording or screenshots of your current design in progress? This may help the community better understand what you want to achieve.

If others from our community have different approaches, feel free to jump in! We welcome your ideas and insights.

Thanks,

Hey there, thanks so much for replying.
That’s v useful to know but i was more talking about at the design stage and not in the prototyping stage.

What i’m looking for is this:
When I’m designing i toggle the redpin on, the graypin automatically toggles off. You can’t ever have both ON, it’s one or the other. That way anyone in my team can’t switch both pins on. Is there a way to do that?

Hi there, Thanks for clarifying!

One idea that comes to mind is to use interactive components. Interactive components are an extension of variants, which means you can add instances of interactive components to your designs just like any other component. The great thing is the instances already have interactions applied for prototyping.

Please take a look at here: Create interactive components with variants

I understand that you’re looking to have interactions between the redpin component’s boolean property and the graypin component’s boolean property without using prototyping. It may be a bit challenging to achieve those interactions without prototyping.

I’ll check with my team internally to see if we can offer more assistance on this. Once we have any information, we will update you!

We also welcome any insight or suggestions from our community, so please feel free to jump in!

Thanks,

I’m not sure if i’m getting you right, but this behaviour is what you are trying to achieve right?

Here is how to do it:

  1. Build the Switch Component, with one property called selected and apply the values true and false

  2. Using the Switch Component you build another Component called “Switch Stack”.
    This time you will need two Variants:

  • For each of these variants apply the properties orange and grey.
  • First Variant: Set the property value for the first switch totrue and for the second switch to false.
  • Second Variant: Do the same thing but vice versa.

2 Likes

Yes perfect.
That’s exactly what i was looking for. Thank you for your help on this. :pray:t3: