# Image Dropdown (Pro feature)

The **Image Dropdown** element is similar to the existing Drop Down element. However, with this element, you can include a set of images for customers to choose from them.

## Element Tab

Image Dropdown element settings will appear after you place the element into the calculator. The Image Dropdown element contains the following attributes in the Element tab:

<figure><img src="/files/Ujhdpzd4ohvXzCtUQ9Wr" alt=""><figcaption></figcaption></figure>

* **Element Name** - title of the field.
* **Placeholder** - you can either fill the placeholder or not (It is not required).
* **Description** - brief description of the field.
* **Element width -** set the width of the field relative to the width of the calculator in 100% scale. You will see the changes in real time.
* **Options**  - under this section, you can add/remove/reorder options of the dropdown and assign numerical values to them. Additionally, the Image dropdown field allows uploading images to options.
* **Default Value** - The default value field takes inputs after you add option values in Add Radio Options
* **Type of Label in Total** - choose how to display the label in the summary (grand total)
  * **Show Value** - Displays the values of the options.
  * **Label Only(No calculation)**- Displays the label of the options, and the value will not be included in Total Calculations. It is useful when the field is used to create conditions.
  * **Label Only(Calculation Value)**- Displays the label of the options, and the value will be included in Total Calculations.
* **Use Currency Sign** - mainly used to accept fractional inputs and applies the currency settings defined in the [Calculator Settings](/cost-calculator-builder/cost-calculator-settings/calculator-settings/currency.md).

#### Set Measurement Unit

This setting allows you to add a measuring unit (Ω, cm, kg, inch, etc.) to the field.

<figure><img src="/files/wACX37IEL9mp6ETLdFVe" alt=""><figcaption></figcaption></figure>

* **Unit Symbol** - enter the unit symbol&#x20;
* **Position** - select the position where the symbol should be displayed relative to the number
* **Thousands separator** - select the symbol to [separate thousands ](#user-content-fn-1)[^1]
* **Number of decimals** - indicate the number of decimals in the fractional part
* **Decimal separator** - select the symbol to separate the fractional part

## Settings Tab

Image Dropdown element settings will appear after you place the element into the calculator. The Image Dropdown element contains the following attributes in the Settings tab:

<figure><img src="/files/R5eUIPStytshGy7d2Y7w" alt=""><figcaption></figcaption></figure>

* **Required** - Defines whether the element will be required to be filled or not.
* **Round Value** - Enable if you want to round the value to the whole number in the total summary.
* **Hidden by Default** - The element will be hidden by default. You can make it visible using [**conditional system**](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/pages/OneKKwO4j2k65VfBcrvD#id-1.-hidden-by-default).
* **Calculate hidden by default** - If any case hides the element: via the **Hidden by Default** setting or  hidden by some [**condition**](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/pages/OneKKwO4j2k65VfBcrvD#id-2.-calculate-hidden-by-default), the element's default value (if it is set) will be counted in the formula.
* **Show in Grand Total** - Disable if you want to hide the element in Grand Total.
* **Show Value in Element (form)** - enable the setting to show the element's value within the specified area inside the form.
* **Additional Classes** - Add[ extra classes](/cost-calculator-builder/plugin-features/additional-classes.md) to the HTML elements to further style changes.

**Type of Label in Total -** Choose how to display the label in the total:

{% tabs %}
{% tab title="Show Value" %}

<figure><img src="/files/mVozR2k6zDR8nE1mTG0p" alt=""><figcaption></figcaption></figure>

**Show Value -** Displays the values of the **Image Dropdown** options.
{% endtab %}

{% tab title="Show Label without Value in Total" %}

<figure><img src="/files/PDlsIDSg7HDzcM4OCi1C" alt=""><figcaption></figcaption></figure>

**Show Label without Value in Total** - Displays the label of the **Image Dropdown** options and value will not be included in Total Calculations. It is useful when the field is used to create conditions.
{% endtab %}

{% tab title="Show Label with Value in Total" %}

<figure><img src="/files/FMRkgxSywzP64EWjBAxu" alt=""><figcaption></figcaption></figure>

**Show Label with Value in Total** - Displays the label of the **Image** **Dropdown** options and value will be included in Total Calculations.
{% endtab %}
{% endtabs %}

Image Dropdown <mark style="color:green;">**with**</mark> and <mark style="color:red;">**without**</mark> values:

{% tabs %}
{% tab title="Image Dropdown WITH value" %}
**Show value in element (form)** setting is <mark style="color:green;">**ON**</mark>

<figure><img src="/files/8vcPxzq2RuRpQaPHWrvd" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Image Dropdown WITHOUT value" %}
**Show value in element (form)** setting is **OFF**

<figure><img src="/files/EoETO7ZaBIs0qWjAfKD4" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

This is the result of the **drop-down with Image** element in the calculator form:

{% tabs %}
{% tab title="Show in Grand Total enabled" %}

<figure><img src="/files/SgxzjwZk5nvgBkQH7Apw" alt=""><figcaption></figcaption></figure>

The result of the **Image Drop-down** element will be displayed in the total summary.
{% endtab %}

{% tab title="Show in Grand Total disabled" %}

<figure><img src="/files/JSD1I82MTLzBtB14XeLM" alt=""><figcaption></figcaption></figure>

The result of the **Image Drop-down** element will not be displayed in the total summary.
{% endtab %}
{% endtabs %}

[^1]: r.g 7, 000, 000 (seven millions)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/drop-down-with-image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.