# 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FzMdH9cnebawFfcxL1WkQ%2FScreenshot%202023-10-11%20at%2011.41.09.png?alt=media&#x26;token=a08d9445-9c1b-49b4-85d3-f2d80e926b48" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fpx4iKGIr7ef3zsmS6HkF%2FScreenshot%202023-10-11%20at%2011.56.30.png?alt=media&#x26;token=3b826535-bcd1-49e6-a241-76517cde0719" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FIFLgj2ZMR3adgoQNdcRU%2FScreenshot%202023-10-11%20at%2012.06.00.png?alt=media&#x26;token=8b596eb4-e71e-483c-971b-aaea2fa5cc13" alt=""><figcaption></figcaption></figure>

* Select the required Conditions Property in the dropdown.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F0AGqPIf8XgkOaNVNetxX%2FScreenshot%202023-10-11%20at%2012.13.36.png?alt=media&#x26;token=269ca557-1ff1-4d1e-b5fe-c774ee241b35" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fzxlrax9HPD2uWvnQ3ZUQ%2FScreenshot%202023-10-11%20at%2012.14.44.png?alt=media&#x26;token=a1bb75c6-0899-432c-90ee-5237686547a7" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fmx46KoutnY9AO309G3Hc%2FScreenshot%202023-10-11%20at%2012.16.23.png?alt=media&#x26;token=0338fd8c-03b8-4668-a58e-0d23b0877ed8" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FFS9lNqsdLUjpkAgLUIaK%2FScreenshot%202023-10-11%20at%2012.21.37.png?alt=media&#x26;token=fb8b0b3a-4e52-442b-befd-3bc4a5fe9304" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FCtCctLbwkMLnLe8kVBmO%2FScreenshot%202023-10-11%20at%2012.27.25.png?alt=media&#x26;token=b4589f40-4452-4c01-a721-876b644cd22a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F4oUKEbIS8qLv4Fg4rAFU%2FScreenshot%202023-10-11%20at%2012.32.10.png?alt=media&#x26;token=c252d9dc-5724-44b8-81c9-72bc160a6ed7" 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="../../../interactions/visibility-conditions" %}
[visibility-conditions](https://docs.cwicly.com/interactions/visibility-conditions)
{% endcontent-ref %}

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FDXKRR7qf1zNu7aLlGs5Z%2FScreenshot%202023-10-14%20at%2010.48.21.png?alt=media&#x26;token=aa28cae7-e76c-4ba2-bf43-bde1dbc140f9" alt=""><figcaption></figcaption></figure>