# Image Radio (Pro feature) The **Image Radio** element is similar to the existing Radio button element. However, the element allows you to add radio button options with a set of images for customers to choose one among them. ## Element Tab The primary configuration options for the element can be modified in the Element tab. The Image Radio element has the following attributes in the Element tab:

* **Element Name** - in this section you can set a name to the field that will be visible to users in front end to the radio field. It has two fields: * **Name** - Title of the element. * **Description** - Description of the element. * **Hint** - adds a small icon next to option to get more info about the option. * **Element Width (%)** - Defines how much horizontal space the element occupies in the form layout. * **Element Columns** - Select into how many parts the width of the element should be divided to display the options. This helps organize radio options into multiple columns. It is especially useful when there are many options, making them easier for users to view and select. If 3 is selected, all the options will be displayed in three raws. * **Option Label** - Add options for users to choose from. * **Option Value** - Add numeric values that will be used in total calculations when an option is selected. * **Select an Image** - here you can select/upload the image to the option. * **Add Option** - Adds a new option to the list. * **Default Value** - Select which option will be preselected when the form loads. * **Type of Label in Total** - Choose how the selected option will appear in the Summary (Total) section. * **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](https://docs.stylemixthemes.com/cost-calculator-builder/conditional-system). * **Label Only(Calculation Value)** - Displays the label of the Radio options and the value will be included in Total Calculations. {% tabs %} {% tab title="Show Value" %}

**Show Value -** Displays the values of the **Image** **Radio** options. {% endtab %} {% tab title="Show Label without Value in Total" %}

**Show Label without Value in Total** - Displays the label of the **Radio** 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** **Radio** options and the value will be included in Total Calculations. {% endtab %} {% endtabs %} Here is the example of Image Radio with element columns setting applied: {% tabs %} {% tab title="2 column" %}

{% endtab %} {% tab title="3 column" %}

{% endtab %} {% endtabs %} ## Variants Tab The Variants tab is available in the Pro version of the plugin and there you can adjust the appearance of the field. The Image Radio element contains the following attributes in the Variants tab:

Here are the available variants: {% tabs %} {% tab title="Default" %}

{% endtab %} {% tab title="Box with icon" %}

{% endtab %} {% endtabs %} {% hint style="info" %} If you select **Box with Icon** variant, you have to choose `svg` icons to them in the [Element Tab.](#element-tab) {% endhint %} There is one setting at the bottom of the tab: * **Apply this radio style to all radio fields in this calculator** - When the option is enabled selected style will be applied to all Image Radio elements in the calculator which is being edited. ## Settings Tab The File Upload element has 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 until a corresponding [**condition**](https://docs.stylemixthemes.com/cost-calculator-builder/conditional-system/condition-actions#id-1.-hidden-by-default) is met. If the element is hidden, its default value will be counted as '0' in the formula * **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 {% tabs %} {% tab title="Show in Grand Total enabled" %}

The result of the **Image Radio** element will be displayed in the total summary. {% endtab %} {% tab title="Show in Grand Total disabled" %}

The result of the **Image Radio** 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.

* **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 Image Radio **with** and **without** values: {% tabs %} {% tab title="Image Radio WITH value" %} **Show value in element (form)** setting is **ON**

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

{% endtab %} {% endtabs %} [^1]: r.g 7, 000, 000 (seven millions)