> 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/visibility-property.md).

# Visibility Property

The Visibility Property allows you to Show/Hide a block and set a default state. 

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

<figure><img src="/files/9FqLfaGdp0BQQ7amvdec" alt=""><figcaption></figcaption></figure>

## Connect&#x20;

The Visibility 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 Visibility Property.
* Select "Modify" in the toolbar or the Block Inspector.

<figure><img src="/files/9FdzZ0ojmSktaGHcZn6T" alt=""><figcaption></figcaption></figure>

* The blocks contained in the component are now visible in the navigator.
* Find and select the Visibility property you wish to connect in the navigator.
* In the Components Settings tab of the Primary tab, click the Visibility field.

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

* This opens the Component Properties modal.
* Select the Visibility property you wish to connect.
* Click "Connect".

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

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

<figure><img src="/files/9fG6AMbD78vzrbFRPy0O" alt=""><figcaption></figcaption></figure>

* In the navigator, select required Component.
* In the Block Inspector, choose required state (Hidden/Visible).

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

When Visible is selected, the item is visible.

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

When Hidden is selected, the item is hidden.

<figure><img src="/files/9ZVZJoKgKucqmmcU91Nh" alt=""><figcaption></figcaption></figure>

## Name&#x20;

Allows you to label the selected Visibility property.

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

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

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

<figure><img src="/files/2VXGyTJgWNDBkdCH2JqO" alt=""><figcaption></figcaption></figure>

## Default

Allows you to set a default Visibility state to your component.

* Open the Components Properties by clicking the "+" icon.
* Select required Default state.

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

The Default Visibility state will now be reflected in the canvas.

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