# Condition Options

{% embed url="<https://youtu.be/xUwxooRP9Mg?si=-4LEAdcqtv-cqA0S&t=273>" %}

In **Conditions**, there are **5** possible options:

* [is selected](#is-selected)
* [is equal to](#is-equal-to)
* [is less than](#is-inferior-to-less-than)
* [is greater than](#is-superior-to-greater-than)
* [is equal to](#is-different-than)

**Value** options will depend on element settings. For example, if you have created **3** options for a Drop-down element and trying to make a condition depending on that element, all **3** options will be available in **Value** option.

## is selected

The condition **"is selected"** is used to add actions to the linked element when one of the options of the first element is selected.

Let's take the demo calculator **Internet Marketing** as an example and make conditions for the toggle element  *"**Marketing"*** depending on the radio element ***"Company size"***.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F0gzFDpBOi4YJs3jJngTU%2FCCB%20Conditions%20-%20is%20selected.png?alt=media&#x26;token=f6561e6c-1ea7-40bf-923d-cc1e84212c33" alt=""><figcaption></figcaption></figure>

**Condition:** if the **"Corporate"** option from the radio element *"Company size"* is selected, *"Buy PPC (Pay per Click) Ads"* will be selected and the toggle field *"Marketing"* will be disabled:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FCqK5g1c5BRtedurvgqxs%2FCCB%20Conditions%20-%20is%20selected%20condition.png?alt=media&#x26;token=fa59ad53-c4c9-4f68-8a59-1890ac519011" alt=""><figcaption></figcaption></figure>

**"Buy PPC (Pay per Click) Ads"** will be enabled and the toggle field ***"Marketing"*** will be disabled, when from ***"Company size"*** radio element  **"Corporate"** option is selected:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FLEc4O76iO7f1gq8IKS8F%2FCCB%20Conditions%20-%20is%20selected%20condition%20works.png?alt=media&#x26;token=5353afec-878d-4650-8034-c9b467092a73" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Checkbox, Image Checkbox and Switch Toggle** elements have extra 4 condition options for is selected: is selected (option), is selected (label(s)), is selected (value) and is not selected (label(s)).
{% endhint %}

### Is selected (option)

The condition "is selected (option)" adds actions to the linked element when one option of the first element is selected. This condition works when the first element is Checkbox, Image Checkbox and Switch toggle.&#x20;

Let’s take an example of food catering. You put the condition to show Do you have any preferences field (linked element) when the option “White” is selected in the Choose the tablecloth field (first element - Image Checkbox).

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FIaYrmOiJL0OdlgcG4Dls%2FScreenshot%202023-12-01%20114009.png?alt=media&#x26;token=02a53104-1943-4f39-8330-6dfe59ae5ffa" alt=""><figcaption></figcaption></figure>

That’s how it will look on the user’s page:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FQsfykLRJmN8fa7X1eMqD%2FConditions1.gif?alt=media&#x26;token=69db8385-3667-442c-aef1-a1b530565d4d" alt=""><figcaption></figcaption></figure>

### Is selected (label(s))

The condition "is selected (label(s))" adds actions to the linked element when several options of the first element are selected. This condition works when the first element is Checkbox, Image Checkbox and Switch toggle.&#x20;

For example, take an interior design booking calendar.  You put the condition to show Add designs you like field (linked element) when the options "Additional zone design" and "Loggia design" are selected in the Additional Services field (first element - Checkbox).

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FCwaRzOeO1iDjnlBvvSjQ%2FScreenshot%202023-12-01%20113252.png?alt=media&#x26;token=db0588a0-917c-4bc6-bc0e-f96b15956edb" alt=""><figcaption></figcaption></figure>

That’s how it will look on the user’s page:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F6t2AEeOYAEQrL1ZZhWHD%2Fconditions%20options%201.gif?alt=media&#x26;token=93eb6968-458d-4fbb-a62d-84028909d1c9" alt=""><figcaption></figcaption></figure>

### Is selected (value)

The condition "is selected (value)" adds actions to the linked element when one or several options of the first element selected give the value you put. This condition works when the first element is Checkbox, Image Checkbox and Switch toggle.&#x20;

There is an example of school trip booking. There are four options with these values in the “Please provide details of dietary requirements” field (first element - Checkbox):

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F17ltE6fnluiCtKxxmITI%2Fconditions2.png?alt=media&#x26;token=95f79fd1-65c1-460c-8cbc-2eda446767a5" alt=""><figcaption></figcaption></figure>

You put the condition to show Describe the other dietary restrictions field (linked element) when the value 4 is selected.&#x20;

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FvCunOi1QEn1QwSaKGbuA%2Fconditions3.png?alt=media&#x26;token=929e0f86-b109-478e-8e99-a60c700f7833" alt=""><figcaption></figcaption></figure>

In this case, the linked element will be shown when users choose Dairy-free( with the value 1) and Vegetarian ( with the value 3) :

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FB9UODTNiuefwOPfD84Ku%2FConditions4.png?alt=media&#x26;token=4b5d8c53-9d0f-403b-bf25-cb15fb144e60" alt=""><figcaption></figcaption></figure>

Or the linked field will be shown when Other ( with the value 4) is selected:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FEQLJCbzCgwmJKEuMG7K1%2FConditions5.png?alt=media&#x26;token=0a67facf-0178-407f-b8f4-05969548ca93" alt=""><figcaption></figcaption></figure>

### Is not selected (label(s))

The condition "is not selected (label(s))" adds actions to the linked element when one or several options of the first element are not selected. This condition works when the first element is Checkbox, Image Checkbox and Switch toggle.&#x20;

For example, venue rental. You put the condition to hide the Number of waiters field (linked element) when the option “Serving tables” is selected in the Extras field (first element - Switch toggle).&#x20;

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FBYguzIRzvJeDzFh7j3eW%2FScreenshot%202023-11-30%20110514.png?alt=media&#x26;token=0d424309-7af7-479e-a518-9bcca565e0d8" alt=""><figcaption></figcaption></figure>

While the field Number of waiters is not hidden by default, users will see this when they switch serving tables on:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fk1r6EyQS2bKcE2iSOB38%2FConditions7.gif?alt=media&#x26;token=1de96805-db29-4df6-a888-536e2673902a" alt=""><figcaption></figcaption></figure>

## is equal to

The condition **"is equal to"** is used to add actions to the linked element when the value of the first element is equal to a certain amount.

Let's take the demo calculator **Calculate Your Taxes** as an example and make conditions for the drop-down element ***"Business Entity"*** depending on the quantity element ***"Income from Salary ($)"***.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FNXdBoY7v6H9AhGcpymf6%2FCCB%20Conditions%20-%20is%20equal.png?alt=media&#x26;token=e46f9151-6737-4bd6-bd55-77d5edf86c2c" alt=""><figcaption></figcaption></figure>

**Condition:** if the value of the *"Income from Salary ($)"* quantity filed is equal to **150 000** drop-down element *"Business Entity"* will be disabled:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FOlvuLBjk4tV3spY2Y0KA%2FCCB%20Conditions%20-%20is%20equal%20condition.png?alt=media&#x26;token=174eef83-d795-4e6c-9634-788ea4fed84b" alt=""><figcaption></figcaption></figure>

The drop-down element ***"Business Entity"*** will be disabled when value of the quantity field  *"**Income from Salary ($)**"* is equal to 150 000:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FXqWaLGtBJ9vDAihXg2Vp%2FCCB%20Conditions%20-%20is%20equal%20condition%20works.png?alt=media&#x26;token=22843567-1af0-4ce5-8899-78637bda82a9" alt=""><figcaption></figcaption></figure>

## is less than

The condition "**is less than**" is used to add actions to the linked element when the value of the first element is less than a certain amount.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FLHRbphY2FrtA8H9DMyW1%2FCCB%20Conditions%20options2.png?alt=media&#x26;token=f91c7969-da3b-4010-bf6c-589626a826c4" alt=""><figcaption></figcaption></figure>

Let's take the demo calculator [Graphic Design](https://docs.stylemixthemes.com/cost-calculator-builder/pre-built-calculators-and-cases/graphic-design) as an example and make conditions for the radio element ***"Mobile Ready"*** depending on the drop-down element ***"Type of Website"***.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FhvPyEsDY09qKUIMynTal%2FCCB%20Conditions%20-%20is%20inferior%20to%20drop-down%20values.png?alt=media&#x26;token=a9ad8919-2555-4db7-9b6c-93aef4673a55" alt=""><figcaption></figcaption></figure>

The two option values of the ***"Type of Website"*** drop-down element are less than 1000:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FQtgZtzE1wyiywMZhIbKb%2FCCB%20Conditions%20-%20is%20inferior%20to%20drop-down%20values.png?alt=media&#x26;token=973d4f3c-a358-4df3-9153-96f710cdc9d3" alt=""><figcaption></figcaption></figure>

**Condition:** if the value of the *"Type of Website"* drop-down is less than **1000,** the *"Mobile Ready"* radio element will be hidden:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FKTNjcodq5gZ42Gc8e6ag%2FCCB%20Conditions%20options2.png?alt=media&#x26;token=8c4321d3-abc3-43de-a73f-044e2d33a973" alt=""><figcaption></figcaption></figure>

When one of the **"eCommerce"** or **"Institutional"** options is selected from the ***"Type of Website"*** drop-down, the ***"Mobile Ready"*** radio field will be hidden:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F8Tsy0Mrryxu4x2Up8e3c%2FCCB%20Conditions%20-%20is%20inferior%20to%20condition%20working.png?alt=media&#x26;token=cca46158-d567-451e-9f0f-cafb5e953d49" alt=""><figcaption></figcaption></figure>

When the **"Corporate"** option is selected from the ***"Type of Website"*** drop-down, the ***"Mobile Ready"*** radio field will be displayed:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FISG6ZXKSonn3oRWOSjHJ%2FCCB%20Conditions%20-%20is%20inferior%20to%20condition%20displaying.png?alt=media&#x26;token=ed75d0a2-6e55-409d-b40b-d2e189bb6ebd" alt=""><figcaption></figcaption></figure>

## is greater than

The condition "**is greater than**" is used to add actions to the linked element when the value of the first element is greater than a certain amount.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FQ3N21nsK6FQHEjEjn5Mr%2FCCB%20Conditions%20options3.png?alt=media&#x26;token=09d9a17e-b56e-4a77-9953-d31b51b55a4f" alt=""><figcaption></figcaption></figure>

Let's take the demo calculator [Venue Rental](https://docs.stylemixthemes.com/cost-calculator-builder/pre-built-calculators-and-cases/venue-rental-service) as an example and make conditions for the checkbox field ***"Extra Servings"*** depending on the range field ***"How many guests are you expecting"***.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FRZpeqzUX2Az0apkHXVdq%2FCCB%20Conditions%20-%20is%20superior%20to%20condition%20calc.png?alt=media&#x26;token=feed908f-4d56-41a5-9761-c57b6514aba3" alt=""><figcaption></figcaption></figure>

**Condition:** If the number of expected guests is more than **150**, two options: Microphone and Stage of the Extra Savings checkbox will be selected:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FKiHVkBq23xY6YG9kSqwk%2FCCB%20Conditions%20options3.png?alt=media&#x26;token=cd7d97ae-78b9-43bc-ae41-8d14925c1919" alt=""><figcaption></figcaption></figure>

When number of the expected guests are greater than 150 in, the Microphone and Stage of the Extra Savings checkbox will be selected:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F1oIfyzk5FeXY5cFQJvUY%2FCCB%20Conditions%20-%20is%20superior%20to%20condition%20working.png?alt=media&#x26;token=f5b55c6f-5e92-4ae2-ad00-6a1c94ab659d" alt=""><figcaption></figcaption></figure>

## is not equal to

The "**is not equal to**" condition is used to add actions to the associated element when an option of the first element is selected that is different from the specified one.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FQdGYREc24kwuT2feXkd9%2FCCB%20Conditions%20options4.png?alt=media&#x26;token=c76d2287-8759-4754-9c7a-3bc46c7fccd2" alt=""><figcaption></figcaption></figure>

Let's take the demo calculator [Tuition Fees](https://docs.stylemixthemes.com/cost-calculator-builder/pre-built-calculators-and-cases/tuition-fees) as an example and make conditions for the dropdown filed ***"How many scholarships are you getting?"*** depending on the toggle field ***"Do you have a scholarship?"***.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F53nHoSg0HnIvZyP6f9Gg%2FCCB%20Conditions%20-%20is%20different.png?alt=media&#x26;token=c3f1624f-f63b-4a4f-9be8-d1425a48cc8d" alt=""><figcaption></figcaption></figure>

**Condition:** if any option different from "**Yes**" is enabled in the toggle field, the dropdown field *"How much in Scholarship are you getting?"* will be hidden.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FPPwqzMAygUrBwEqYuoaJ%2FCCB%20Conditions%20options4.png?alt=media&#x26;token=4ec5a456-920d-47b2-b3b5-37fde4a241d0" alt=""><figcaption></figcaption></figure>

When the "**No**" option is enabled on the toggle field ***"Do you have a scholarship?"***, the dropdown field ***"How much in Scholarship are you getting?"*** will be hidden.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fod35yygWH7WofvbQJK7j%2FCCB%20Conditions%20-%20is%20different%20works.png?alt=media&#x26;token=ee45f025-29ec-4a68-ad3c-94ed33820fa7" 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/condition-options.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.
