# Introduction

{% embed url="<https://youtu.be/xUwxooRP9Mg?si=GBGUsTPoyvKesCUA>" %}

{% hint style="info" %}
When rearranging options in the elements such as **Radio Select, Image Radio, Checkbox, Image Checkbox, Dropdown list and Image Dropdown**, keep in mind that conditions rely on the positions of these options. Swapping element options can cause conditions to malfunction. Therefore, it's best not to swap them if conditions are set up. If you must swap, remember to readjust the conditions accordingly to maintain the calculator's functionality.
{% endhint %}

The usage of the conditional system is important when you have too many logical operations. It is really easy to use this feature due to its **user-friendly** interface.

1. After choosing Calculator elements created in a calculator, only those elements will be listed in your condition area. Since this feature is dynamic, you cannot put conditions related to an element that does not exist.

{% hint style="warning" %}
**NOTE:**

It is important to set *different values* in the options of [Radio Button](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/radio-button), [Drop Down](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/drop-down),[ Toggle button](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/toggle-button), and [Checkbox ](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/checkbox)elements so that the conditional system feature works in a correct manner.
{% endhint %}

![](/files/Y2cWISCF8TZcmFd03zVU)

2. You have to click just once on an element that you need and it will be shown in the working area. The chosen element has **8 connection points** for chaining with other elements. Click the  ![](/files/xigQBYIJXkREQKwPluM8) icon inside the element to delete this element from Conditions.

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

3. To create a connection, you need to drag a line from the selected element to the desired one. The arrow indicates that the right element depends on the left element.

{% hint style="warning" %}
**NOTE:**

All connection points of one element are **equal** and their position does not affect the conditions.
{% endhint %}

![](/files/2fBR4skcaPCLzTBJcx3o)

4. It is possible to create multiple connections and conditions between different elements.

![](/files/kb8C9R0y1GKWqiZ3bQyv)

5. You can filter and show elements that impact fields and get affected by fields.

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

Here is what condition options can be used with each element:

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


---

# 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/conditional-system/introduction.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.