# Conditions Property

The Conditions Property allows you to add specific additional styles to a component other than numbers and colours. 

You can input a Name and set specific conditions for a component block.

* Open the Components Properties modal by clicking the "+" sign.
* Select Conditions in the Properties dropdown.
* Select the Conditions Property you wish to configure.

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

## Connect&#x20;

The Conditions Property needs to be connected for it to be applied to the canvas.&#x20;

{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}

* Select the Component to which you want to connect the Conditions Property.
* Select "Modify" in the toolbar or the Block Inspector.

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

* The blocks contained in the component are now visible in the navigator.
* Find and select the Conditions property you wish to connect in the navigator.
* In the Components tab of the Primary tab, click the Component icon of the property you wish  to add.

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

* Select the required Conditions Property in the dropdown.

<figure><img src="/files/8kSEIiMJoSyjiPi8hDE4" alt=""><figcaption></figcaption></figure>

The Conditions Property will now be visible in the Content field in green which indicates that it is connected.

<figure><img src="/files/8I7czXUns0CuAACGEKAh" alt=""><figcaption></figcaption></figure>

## Conditions

The Conditions property has to be set up in order for the required conditions to be displayed.

* Click the Conditions property in the Block Inspector to open the Conditions Property modal.
* The Conditions that can be customised for the required property will now be visible.

{% hint style="info" %}
The Conditions available will depend upon the chosen property.
{% endhint %}

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

Now, when you return to Customise, you can adjust the required Options property from the Block Inspector.

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

## Name&#x20;

Allows you to label the selected Conditions property.

* Open the Component Properties modal.
* Select required Conditions property.
* Input suitable label name to Name field.

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

The required Name label will now be visible in the Block Inspector.

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

## Use

* To set a Condition, select the required component.
* Click the Conditions icon in the Block Inspector to open the Conditions modal.
* Set the required conditions.

{% content-ref url="/pages/WwSxeb6VoE03NO8vHky1" %}
[Visibility Conditions](/interactions/visibility-conditions.md)
{% endcontent-ref %}

<figure><img src="/files/YEIQbRFb3wfYun1QNafh" 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.cwicly.com/cwicly/components/properties-add/conditions-property.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.