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

## Connect The Visibility Property needs to be connected for it to be applied to the canvas. {% 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.

* 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.

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

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

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

When Visible is selected, the item is visible.

When Hidden is selected, the item is hidden.

## Name Allows you to label the selected Visibility property. * Open the Component Properties modal. * Select required visibility property. * Input suitable label name to Name field.

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

## Default Allows you to set a default Visibility state to your component. * Open the Components Properties by clicking the "+" icon. * Select required Default state.

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