> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/cwicly/components/properties-add/conditions-property.md).

# Conditions Property

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

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>
