Change Background Color When Selected (and revert when another option selected)

I have three containers, we can consider them like radio buttons, I’d like to change the background color when one of them is tapped.

I know that it is possible by using a color code variable, but I want only one of them to be selected, so when selecting another option, selected value should get back to its original color.

How can I achieve this?

I would go about this having three color variables, each one bound to the background color of each container.

Whenever a container is tapped, I would set the value for each one of these variables.
So, let the containers be called: 1, 2, and 3, and let’s call the new background color “grey”, and default background color “white”.

If container 1 gets tapped, container 1 background color variable gets set to “grey” and container 2 and 3 background color gets set to “white”.

If container 2 gets tapped, container 2 background color variable gets set to “grey” and container 1 and 3 background color variable gets set to “white”"

So on for when container 3 gets tapped.

Does that work for you?

Hi Alan,

Thanks for the suggestion! To make it tidier I did the following:

  • Created one list variable, list of color codes
  • Set the variable flow as you suggested
  • For each cell I have set up the relevant background color formula

Although it works, it’s a bit too manual. I’ll look for a way to make it more component-like so I can use it anywhere.