How Do I represent a Select Input Option as an image

Hi Retool People!

Does anyone know how to represent a Select Input Option as an image. Here's a wireframe of a wizard i'm trying to build. The user would pick a service option, click next and it will take you to the next set of image options as you proceed through the wizard. Different selections might result in different options being grayed out conditionally. However, just getting the options to display as images is my main question right now.

Thanks!

Hi @shutter.drag

Thanks for reaching out about this & sharing the screenshot. Are you looking for a component with dropdown functionality that also supports images? Unfortunately, the select component doesn't work with images currently.

Would an image grid component be helpful here?

You could have scripts that track which images have been clicked on similar to this example using temporary state:

Thanks Tess!

For the select Component, I was imagining a radio or checkbox being replaced by an image. Setup kind of like the image below. I was hoping maybe there was a way of inserting it into caption field or some other work around like that.

The image grid workaround is helpful. I'll try and implement it and see if I can get it to work!

Thanks Again!

Got it! I'll submit a feature request internally to add image functionality as you've described

1 Like