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

# ID Property

The ID Property gives an ID to the block if you wish to give it a specific name in order to target it more easily (for example to connect it to a modal).

By default the Block ID is indexed relative to the number of blocks on the page.

* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Select the ID Property you wish to configure.

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

## Connect&#x20;

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

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

* The blocks contained in the component are now visible in the navigator.
* Find and select the block to which you wish to connect an ID Component Property.
* In the Components tab of the Primary tab, find ID.

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

* Click the ID Content field to open the Component Properties modal.&#x20;
* Select the ID property you wish to connect.
* Click the Connect button.

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

The ID Property will be visible in green in the Block Inspector.

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

## Customise

To customise the ID Property, make sure that Customise is selected in the Tool Bar.

* Select required Component in the navigator.
* In the Block Inspector, input a suitable name in the ID field

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

## Name&#x20;

Allows you to label the selected ID property.

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

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

## Placeholder&#x20;

Ensures that suitable alternative text appears in the ID field of the block inspector if the ID field has been cleared or is empty.

* Open the Components Properties.
* Select required ID property.
* Open Settings tab.
* Input suitable text to Placeholder field such as "Enter ID".

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

The Placeholder text will now appear in the ID field of the Block Inspector.

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

## Auto Generate

The Auto Generate property, when enabled, will automatically choose a name for your ID.

* In the Components Properties modal, Toggle on/off Auto Generate as required.

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

The Auto Generated ID will now be visible in the Block Inspector ID field.

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

If the Auto Generated ID is not acceptable, click the Reset button to the left of the ID label. This will Auto Generate a new ID.

* With the required component selected, n the Block Inspector, find the ID and click the Reset button to generate a new ID.

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

## Simple Type

The Simple Type property allows you to input static data.

* Open the Components Properties.
* Select required ID property.
* Open Settings tab.
* Select Simple as Type.

![](/files/xNGFeMYqM9ZL0CljjFZ7)

The simple (static) data will now look something like this.

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

## Advanced Type

The Advanced Type property allows you to input dynamic or static data as required.

* Open the Components Properties modal.
* Select required ID property.
* Open Settings tab.
* Select Advanced as Type.

![](/files/QFHv4B1DyOIIrJhtsvu8)

* Make sure you are in Customise.
* In the Block Inspector, click the Dynamic icon next to ID label.

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

* This opens the Dynamic modal.
* Fill in the dynamic data fields.

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