# Toggle Property

The Toggle Property allows you to configure a toggle state for boolean values. This means that the icon property can be shown or hidden for any property that only has two possible states (true/false).

You can input a suitable Name, and decide whether it should be shown or hidden by Default.

* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Select Toggle 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%2F7cw2EAZNNlEn9FPUQlNy%2FScreenshot%202023-09-28%20at%2011.16.12.png?alt=media&#x26;token=b447e61b-cce2-49e4-8def-b7e3a1e6c0d0" alt=""><figcaption></figcaption></figure>

## Connect&#x20;

The Toggle 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 %}

We need to open the Component to see the blocks that it contains.

* Select the Component to which you want to connect the Colour Property.
* Select "Modify" in the toolbar or the Block Inspector.

We need to open the Component to see the blocks that it contains.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FxQxub57WCgiEt7uIGVII%2FScreenshot%202023-09-28%20at%2011.25.31.png?alt=media&#x26;token=19906cd5-3ac9-426d-ac0e-ed2dae6da8bf" alt=""><figcaption></figcaption></figure>

The individual blocks will now be visible.&#x20;

* Select the block to which you wish to add a Toggle Property.
* In the Block Inspector, click Component icon above the Property you wish to modify to open the Component Properties modal.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fv61qeyi7SrHBvGYeBUCW%2FScreenshot%202023-09-28%20at%2011.22.41.png?alt=media&#x26;token=82676d27-4a0c-412b-a7d4-e19a952b5671" alt=""><figcaption></figcaption></figure>

The Toggle property should 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%2FrVXVRE6oRCwFp9g5zGeE%2FScreenshot%202023-09-28%20at%2011.49.14.png?alt=media&#x26;token=524170cd-91ca-4147-9209-4641f3055baf" alt=""><figcaption></figcaption></figure>

## Name&#x20;

Allows you to label the selected Toggle property.

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

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fy8NVRNAvBQ5vxyB0RwUT%2FScreenshot%202023-09-28%20at%2011.48.22.png?alt=media\&token=cd849aba-46e0-411a-aeb5-c75a9e6ff893)

The Name label is now 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%2FGj3aGrMpdA9VwjSFMOkk%2FScreenshot%202023-09-28%20at%2011.51.09.png?alt=media&#x26;token=eef8574f-979c-49b7-ab72-4382f3288926" alt=""><figcaption></figcaption></figure>

The Toggle can be set to True or False or left unset depending on your requirements.

* In the Component Properties modal, select Default you wish to be applied, such as False, True or unselected.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F3vpIOPTFQYHLRaT2ZSaZ%2FScreenshot%202023-09-28%20at%2011.50.27.png?alt=media\&token=caa0ba46-5b46-4b9c-9ffc-6a29181ae3a3)

For example, if you set visibility default to "true"

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FViiGNWfVxEmxtkkZ25jp%2FScreenshot%202023-09-28%20at%2011.53.09.png?alt=media&#x26;token=56971f49-3c0e-41a1-9f9e-5d87a94a9f7b" alt=""><figcaption></figcaption></figure>