# Image Checkbox (Pro feature)

The **Image Checkbox** element is similar to the existing Checkbox element. However, the element allows you to add radio button options with a set of images for customers to choose from.

## Elements Tab

In the Elements tab, fundamental settings of the element can be configured. The Image Checkbox element contains the following attributes in the Elements tab:

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

* **Element Name** - title of the field.
* **Description** - brief description of the field.
* **Element width -** set how much horizontal space the element occupies in the form relative to the width of the calculator in 100% scale. You will see the changes in real time.
* **Element Columns** - Select how many parts the width of the element should be divided to display the options. This helps organize checkbox options into [multiple columns](#id-3-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 rows.
* **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.
  * **Upload Image** - here you can select/upload the image to the option.
  * **Add Option** - Adds a new option to the list.
* **Default Value(s)** - Select which option(s) will be preselected when the form loads.
* **Type of Label in Total** - Choose how to display the selected option of the field in the Summary.
  * **Show Value -** displays the numeric value of the option in the Summary.&#x20;
  * **Label Only(No calculation)** - Displays the label of the options, and the value of the selected option will not be included in [**Formula**](/cost-calculator-builder/calculator-elements/total.md) 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 of the selected option will be included in [**Formula**](/cost-calculator-builder/calculator-elements/total.md) Calculations.

{% tabs %}
{% tab title="3 Columns" %}

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

{% tab title="4 Columns" %}

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

{% hint style="info" %}
You can find all the necessary icons in SVG format on [iconscout.com](https://iconscout.com/) or other services. [Find out more.](https://iconscout.com/)
{% endhint %}

### 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

## 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 Checkbox element contains the following attributes in the Variants tab:

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

**Here are the available styles for the image checkbox element:**

{% tabs %}
{% tab title="Default" %}

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

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

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

{% hint style="info" %}
If you select **the Box with Icon** variant, you have to choose `svg` icons to them in the [Elements Tab.](#elements-tab)
{% endhint %}

There is also one more setting at the bottom of the tab:

* **Apply this image checkbox style to all image checkboxes in this calculator**. When the option is enabled, the selected style will be applied to all Image Checkbox elements in the calculator that is being edited.

## Settings Tab

In the Settings tab, fundamental settings of the element can be configured. The Image Checkbox element contains the following attributes in the Settings tab:

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

* **Required** - Defines whether the element will be required to fill or not.
* **Round Value** - Enable if you want not to round the value to the whole number.
* **Hidden by Default** - The element will be hidden until a corresponding [**condition**](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/pages/OneKKwO4j2k65VfBcrvD#id-1.-hidden-by-default) is met. If the element is hidden, its default value will be counted as '0' in the formula &#x20;
* **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.&#x20;
* **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.
* **Number of Options to Select** - Ability to set the maximum number of available options to choose from.
* **Additional Classes** - Add extra classes to the HTML elements to further style changes.

The result in the calculator form with the Total Summary block:

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

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

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

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

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

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

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

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

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

{% tab title="Image Checkbox WITHOUT value" %}
**Show value in element (form)** setting is <mark style="color:red;">**OFF**</mark>

<figure><img src="/files/kbVrfFyDJgDoyx9ozQAH" alt=""><figcaption></figcaption></figure>
{% 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/checkbox-1.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.