Best way of prototyping a highlight on an item in a list?

Ask the community
1

Hi there,

I’m sure this comes up a lot but I wondered what the best way of highlighting one item in a list of items is on click? I know I can change component variant on click but this won’t change the others back. Here’s what I need:

List of Items - Default Not Highlighted
Click on item - Highlight Item
Click on different item - Highlight this item but UNHIGHLIGHT other item

What is the best way of doing this?

This is the only way I can do it at present which is laborious and requires a new component for every version of the list. Seems like an inefficient way to do it!

image
image1920×1641 186 KB

Thanks
Jen

2

Well, it seems you can make it a bit easier with variables

This is how I did it. Firstly you would need a list component where each variant contains only one selected item

image
image2526×552 155 KB

image
image1240×842 42.6 KB

Then you create a variable to bound to the selected property of your list

image
image938×314 4.61 KB

Lastly, you make each list item to set a variable value. I use the multi-edit feature so I don’t have to touch every single list item in every variant I made

image
image1478×1096 134 KB

And now I have one

3

But for a list of 13 items you need to have 13 variants, still a big ouch

4

Thank you for that I thought something like that would be possible! I’ll give that a go.

5

This worked thanks! Thanks for mentioning multi-edit, hadn’t realised this was possible so that’s a life saver!

6

Glad it helped, cheers