Visually showing a selection when clicking on a list within a form

Title is probably a bit confusing. I have an order form. If they want to select a sign from the inventory, then their inventory pops up. On click, I can write the selection and mark it down. I just don’t know what the best way to show the user clicking that they have selected that sign. Hard to explain so I made a video:

I think you understand the problem pretty well and have good ideas on how to make it look “right”.

Personally, my preference is to surround the chosen card with a green border, but that is not possible, I’m afraid.

I think you should either go the Cloudinary way to make the image visually stand out, or maybe just add a green check as the card’s “avatar” and add “Chosen” as “avatar text” when the card is chosen.

Agree with Thinh. Just change the appearance of the selected card in some way.

I think your second option could create a slightly cumbersome user experience, so I’d probably steer away from that. Note - adding a second inline list doesn’t mean you’d be adding more data, these are all computed on the fly using the source data, which will already be there.

1 Like

thanks for the suggestions guys, i think im going to change the tag to say “Selected”. At first i was going to do the avatar suggestion, but i think the above looks cleaner.
The only thing is i’m unsure how to unselect it incase they click on another one. Read some threads that there is no “clear column” option. Was going to clear everything on click then write Selected to ''this item".

Here is an example…

2 Likes