# List Property

The List Property allows you to add a list to a component. Input required information such as Name, Default, Placeholder, Canvas Placeholder.&#x20;

Choose Type as required, simple or advanced.

Below is an example of what the Components Properties modal will look like once filled out.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FDAEQWw9MQhZkIQjIK1zx%2FScreenshot%202023-09-22%20at%2010.24.04.png?alt=media&#x26;token=6d71af28-0811-47b9-b204-3d380fc9fe8d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FIuVAvw6JHxoTtVRGiwf3%2FScreenshot%202023-09-21%20at%2011.03.03.png?alt=media&#x26;token=6f5e7ed2-298d-44f5-82ac-82ab916950c7" alt=""><figcaption></figcaption></figure>

## Connect&#x20;

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F5Mf7k2GU57NudACOHPU8%2FScreenshot%202023-09-21%20at%2011.09.22.png?alt=media&#x26;token=4b1a7456-ba0f-4f31-84a6-98823451b46d" alt=""><figcaption></figcaption></figure>

* The blocks contained in the component are now visible in the navigator.
* In the navigator, find and select the List property you wish to connect.
* In the Components tab of the Primary tab, click the Content field to open the Component Properties modal.&#x20;

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FRyymwd8Xdzh4oJpr3JZN%2FScreenshot%202023-09-21%20at%2011.11.26.png?alt=media&#x26;token=299e6b37-f098-4066-8a38-23fd24393932" alt=""><figcaption></figcaption></figure>

* In the Component Properties modal, select the List property you wish to connect.
* Click the Connect button.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FDarGPvHSt3tl71frShM1%2FScreenshot%202023-09-21%20at%2011.45.31.png?alt=media&#x26;token=1ae1e66e-d0e9-45fd-928a-d30afaca82f8" alt=""><figcaption></figcaption></figure>

* The List Property name is now visible in the Content field 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%2FxjbPp6XmNi1PLUlxRtPr%2FScreenshot%202023-09-21%20at%2011.16.37.png?alt=media&#x26;token=2d5fb2ad-a907-4236-be78-a4ca3a4a6f66" alt=""><figcaption></figcaption></figure>

Once correctly connected, you should have something like this:

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FxmG7PDER5kDBKL7hOYu9%2FScreenshot%202023-09-21%20at%2011.48.23.png?alt=media&#x26;token=00e0db63-5611-4995-bb1d-df283f603c98" alt=""><figcaption></figcaption></figure>

## Name&#x20;

Allows you to label the selected List property.

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FQy0g812k4B23E0Y7TbT6%2FScreenshot%202023-09-21%20at%2011.49.51.png?alt=media&#x26;token=967c2687-fef8-45f5-a95a-86cd27dbb130" alt=""><figcaption></figcaption></figure>

The required label will now be visible in the Block Inspector next to the list field.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FGe5ES2QM7x0hHOPUqKdm%2FScreenshot%202023-09-21%20at%2011.55.18.png?alt=media&#x26;token=82e1d0ad-3d08-4b00-ae03-46b012ea0f52" alt=""><figcaption></figcaption></figure>

## Default

Allows you to set suitable default text to your component.&#x20;

* Open the Components Properties.
* Select required List property.
* Open Settings tab.
* Input suitable default text in Default field.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FSTYyY6cIVxjHxpnGwv9Y%2FScreenshot%202023-09-21%20at%2012.02.20.png?alt=media&#x26;token=32f89150-4efa-4169-bf56-c80a9fb7bcfa" alt=""><figcaption></figcaption></figure>

This is how it should now look on the canvas.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FvKqtIUIMEHpq7Ws2P0Pl%2FScreenshot%202023-09-21%20at%2012.04.20.png?alt=media&#x26;token=87133fb2-c159-4be6-bc76-b4d12b4bb300" alt=""><figcaption></figcaption></figure>

## Placeholder&#x20;

Ensures that suitable alternative to the list appears in the list field of the block inspector if the list field has been cleared.

* Open the Components Properties.
* Select required List property.
* Open Settings tab.
* Input suitable text in Placeholder field such as "Write Here".

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FF9W3dM4mmpwZMoSdzDXy%2FScreenshot%202023-09-21%20at%2012.09.20.png?alt=media&#x26;token=da4a8cba-f391-4f5b-af72-140805f75c91" alt=""><figcaption></figcaption></figure>

The placeholder text will now be visible in the required field of the Block Inspector.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FUU7OfelN0ifYN2FlJ5bc%2FScreenshot%202023-09-21%20at%2012.13.33.png?alt=media&#x26;token=b5f07a45-ff65-4a1d-86aa-ef43b53005e7" alt=""><figcaption></figcaption></figure>

## Canvas Placeholder

Alternative text that appears in the List field of your post or page if the required List has not been added.

* Open the Components Properties.
* Select required List property.
* Open Settings tab.
* Input suitable text to Canvas Placeholder field, such as "Write List Here".

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FtDhH8JLo8b0K1aTS140w%2FScreenshot%202023-09-21%20at%2012.20.01.png?alt=media&#x26;token=6c4a2c3a-7091-4247-8572-6059663d9469" alt=""><figcaption></figcaption></figure>

The canvas should look something like this now.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FUVV9sPvBjVtONbJ64SxD%2FScreenshot%202023-09-22%20at%2010.10.16.png?alt=media&#x26;token=1159e078-05bd-4380-95e7-c8fc95dcd591" alt=""><figcaption></figcaption></figure>
