✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
πŸ‡ Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Dropdown with Images as items

Hello Everyone,

I have a status column in my dataset that can have a few different values.
I have assigned different images to each status, so instead of showing the status text, I show the image related to that.

The problem is that I want to make this field somehow editable. The most intuitive solution is using a dropdown component. However, the dropdown only accepts string or integer as the label.

Is there a way to add the images to the dropdown? if not, what else can I do in this situation?

One way to show image is using a table, but is shown when the user hover the row:

Other alternative is try to combine different dcc.Image with a dcc.checkboxes or dcc.Radioitem larger enough to get each item closer to each image.

You also can use card image with buttons that trigger the option showed.

Thanks @Eduardo for the answers.

However I don’t understand how using a tooltip or checkbox will help in this situation.
What I ideally would like to have is a status image that when you click on it, a dropdown opens with other status images in it.

with checklists I would need to show all the statuses (that might be many), and with the tooltip I cannot actually select another status, or can I?

The card also is not working, because I like this thing to be as compact as possible, and again I can have up to 10-20 different statuses.

No, my answer was taking into consideration that you mentioned a β€˜few’ images.

Yeah, sorry. I should have described it better :slight_smile:

1 Like