# 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>


---

# 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/visibility-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.