> For the complete documentation index, see [llms.txt](https://docs.powerfulform.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.powerfulform.com/field-types/selects/image-dropdown.md).

# Image Dropdown

Offer a closed list where every entry carries a thumbnail, so visitors recognize the choice at a glance.

The **Image Dropdown** field is a dropdown whose entries each show a small picture beside the text. Use it when the list is too long for a grid of tiles but the picture still helps — a catalog of print designs, a list of flavors, or the model of appliance a repair booking is for.

## 🔧 How to Set It

In the form editor, click **Add element**, open the **Selects** category and pick **Image Dropdown**. The field is added and its settings open on the left.

See [Add and arrange elements](/build-your-form/add-and-arrange-elements.md) for the other ways to add a field and how to reorder them.

## 🔧 Settings

Only the settings specific to this field are listed here. **Label**, **Placeholder**, **Description**, **Required**, **Hide label**, **Column width**, **Conditional display** and the rest of the shared settings work the same on every field.

| Setting                | What it does                                                                                    | Default            |
| ---------------------- | ----------------------------------------------------------------------------------------------- | ------------------ |
| **Options**            | The list of choices, each with an optional picture.                                             | Option 1, Option 2 |
| **Multiple selection** | Lets the visitor choose more than one entry.                                                    | off                |
| **Limit selections**   | Turns on a minimum and maximum number of picks. Appears only when **Multiple selection** is on. | off                |
| **Min selections**     | The fewest entries the visitor must choose. Appears only when **Limit selections** is on.       | empty              |
| **Max selections**     | The most entries the visitor may choose. Appears only when **Limit selections** is on.          | empty              |

<figure><img src="https://2907469752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FehM2rz7MmKkWcJmgvJOe%2Fuploads%2Fgit-blob-699580d4db5b076830e892a61950f1332844ea7f%2Fscreenshot-field-types-image-dropdown.png?alt=media" alt="The Image Dropdown field settings panel open in the form editor"><figcaption><p>Image Dropdown combines a dropdown with a picture per option.</p></figcaption></figure>

### Build the list quickly

For a long catalog, add the wording first and the pictures afterward:

1. Under **Options**, click **Bulk add Option**.
2. Paste one choice per line and click **Add values**. A line written as `label:value` sets the visible wording and the stored value separately.
3. Go back down the list and upload the thumbnail for each row.

Duplicate entries are refused with **Value must be unique**, so every choice stays distinguishable in your reports.

## 🔄 How It Works

### What the visitor sees

The field looks like an ordinary dropdown until it is opened. Inside, each entry shows its thumbnail followed by its label. Once the visitor chooses, the thumbnail and label stay visible in the closed field.

Entries without a picture appear as plain text, so you can mix pictured and unpictured choices in one list — useful for an *Other* or *Not sure* entry at the bottom.

With **Multiple selection** on, the visitor can pick several entries and each one is listed in the closed field.

### What gets saved

The field stores the **Value** of each chosen entry, not the picture and not the **Label**. Click **Expand** above the options list to see and edit those values.

The stored value is what appears in **Submissions**, in your notification emails, in exports, and in any connected integration.

## 💡 Example

* **Catalogue of print designs** ⇒ one entry per design, picture beside the name
* **Flavour** ⇒ single selection
* **Which appliance model?** ⇒ a long list where the picture still helps the visitor confirm

<br>

## ⚠️ Limits & Notes

### Limits on how many are chosen

Turn on **Multiple selection**, then **Limit selections**, and set **Min selections** and **Max selections**. When the visitor is outside the range, the form blocks the submission and shows a message naming your number — for example *Please choose at least 2 options* or *Please choose at maximum of 3 options*.

### Which picture field to use

| Use                | When                                                                                |
| ------------------ | ----------------------------------------------------------------------------------- |
| **Image Dropdown** | Many choices, and you want the form to stay compact.                                |
| **Image Options**  | A handful of choices, and the picture should be big enough to compare side by side. |
| **Color Swatch**   | The choice is a color rather than a photograph.                                     |

\ <br>

## Next steps

* [Image Options](/field-types/selects/image-options.md) — the same choices shown as a grid of large tiles.
* [Dropdown](/field-types/selects/dropdown.md) — a plain text dropdown with an optional search box.
