# 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:
* **Name** - Title of the element
* **Description** - Description of the element
* **Option Label** - Add options for users to choose from
* **Values or Price** - Add values (only numbers) to options
* **Add New** - You can add as many options as you need
* **Image** - You can upload images
* **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 total
* **Show Value** - Displays the values of the Radio options.
* **Label Only(No calculation)**- Displays the label of the Radio 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 Radio options and the value will be included in Total Calculations.
* **Drop Down Options** - Add options with their values and select images for them by clicking the **Add Row** button. You can add as many options as you need.
* **Default Value** - The default value field takes inputs after you add option values in **Add Drop Down Options**
## 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:
* **Currency Sign** - Enable if you want to show the currency symbol in the total summary
* **Required** - Defines whether the element will be required to be filled or not
* **Round Value** - Disable if you don't want to round 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/conditional-system/condition-actions#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/conditional-system/condition-actions#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 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" %}
**Show Value -** Displays the values of the **Image Dropdown** options.
{% endtab %}
{% tab title="Show Label without Value in Total" %}
**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" %}
**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 **with** and **without** values:
{% tabs %}
{% tab title="Image Dropdown WITH value" %}
**Show value in element (form)** setting is **ON**
{% endtab %}
{% tab title="Image Dropdown WITHOUT value" %}
**Show value in element (form)** setting is **OFF**
{% endtab %}
{% endtabs %}
Here is an example of filling the element fields:
This is the result of the **Drop Down with Image** element in the calculator form:
{% tabs %}
{% tab title="Show in Grand Total enabled" %}
The result of the **Image Drop-down** element will be displayed in the total summary.
{% endtab %}
{% tab title="Show in Grand Total disabled" %}
The result of the **Image Drop-down** element will not be displayed in the total summary.
{% endtab %}
{% endtabs %}
### Add a measuring Unit
This setting allows you to add a measuring unit (Ω, cm, kg, inch, etc.) to the field.
Add a measuring unit
* **Unit Symbol** - enter the unit symbol
* **Position** - select the position where the symbol should be displayed relative to the number
* **Thousands separator** - select the 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 fractional part
[^1]: r.g 7, 000, 000 (seven millions)
