# Options Property

The Options Property allows you to add specific additional styles to a component other than numbers and colours.&#x20;

You can input a Name, set a default style and set options for the default as required.

* Open the Components Properties modal by clicking the "+" sign.
* Select Options in the Properties dropdown.
* Select the Options 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%2FTw3JhkrgGUW2MOfHZBSh%2FScreenshot%202023-10-01%20at%2010.32.19.png?alt=media&#x26;token=66eea968-b2c0-4e69-9018-a9c0375b135e" alt=""><figcaption></figcaption></figure>

## Connect&#x20;

The Options 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 Options 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%2F8BNLFoCH1OFCHNqUq9Xk%2FScreenshot%202023-10-01%20at%2010.53.35.png?alt=media&#x26;token=60e4f00d-274d-49c1-9d47-6fee5bc27e59" alt=""><figcaption></figcaption></figure>

* The blocks contained in the component are now visible in the navigator.
* Find and select the Options property you wish to connect in the navigator.
* In the Components tab of the Primary tab, click the Component icon of the property you wish  to add.&#x20;

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FbmH52WoLd7J5Zhq2CNUE%2FScreenshot%202023-10-01%20at%2010.59.49.png?alt=media&#x26;token=bf97ebe1-d354-43ef-82bc-463bd41977d3" alt=""><figcaption></figcaption></figure>

* Select the required Options 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%2FCGUUKfrzu5iaUwRmzFe6%2FScreenshot%202023-10-01%20at%2011.04.24.png?alt=media&#x26;token=8cc1fe2d-bdb1-49a8-a758-ec9e8ac9cd63" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F0SlRY1vZQKfmYIYNQgN2%2FScreenshot%202023-10-01%20at%2011.05.54.png?alt=media&#x26;token=34d158ac-d48e-4430-937e-c0eb04c69bab" alt=""><figcaption></figcaption></figure>

### Options&#x20;

The Options property has to be set up in order for the required options to be displayed.

* Click the Options property in the Block Inspector to open the Components Property modal.
* The Options that can be customised for the required property will now be visible.

{% hint style="info" %}
The Options available will depend upon the chosen property.
{% endhint %}

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FC0Z1Gz9JpRC1XVIWyV1w%2FScreenshot%202023-10-01%20at%2011.12.49.png?alt=media&#x26;token=c477e305-8453-465d-a228-7220131361b6" alt=""><figcaption></figcaption></figure>

Now, when you return to Customise, you can adjust the required Options property from the Block Inspector.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FxQsd08hKWAQXdQn4jcgm%2FScreenshot%202023-10-01%20at%2011.19.50.png?alt=media&#x26;token=f33e47c7-4e9f-4fe7-a8ef-1fac4871b542" alt=""><figcaption></figcaption></figure>

## Name&#x20;

Allows you to label the selected Options property.

* Open the Component Properties modal.
* Select required Options 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%2FLTZw2pvdrRGepgIZCuve%2FScreenshot%202023-10-01%20at%2011.23.10.png?alt=media\&token=1643b218-16f0-4909-90ce-e0b30c5a8382)

The required Name label will 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%2FmRdwq8k0bvXYOMKvVlUC%2FScreenshot%202023-10-01%20at%2011.26.42.png?alt=media&#x26;token=93bb342c-0e9c-49b9-ae64-e0a2c2555073" alt=""><figcaption></figcaption></figure>

The Options property allows you to add the required Options and Values to your Options Property.

In this example, we want to offer two Direction Options, Column and Row so we need to add additional  Option.

* Click the  "+" sign next to Options to add additional Options.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FCB3OJtFwHaOeEQDRsUie%2FScreenshot%202023-10-01%20at%2011.28.30.png?alt=media\&token=e6b53196-010a-4c4b-9557-e84f373c121c)

Input a suitable label for the first value, in this example "Row".

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fi5OO2yAYXqQyqgPpsyTm%2FScreenshot%202023-10-01%20at%2011.30.42.png?alt=media\&token=d94ddfa2-140d-48f2-948c-16588bc1ead3)

* Input required value, in this example "Row".

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FpU47kmExVEDM4WhVqcaI%2FScreenshot%202023-10-01%20at%2011.31.53.png?alt=media\&token=57174c96-b40e-4d63-a93e-51fc3473f77c)

* Input required label and value for the additional option if there are any.
* In this example, we have given a "Column" label and value.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FvKmm5MBkWkv17xOxrXRa%2FScreenshot%202023-10-01%20at%2011.32.47.png?alt=media\&token=b4cbf0e5-2f45-494a-92a6-b584c2ab4788)

### Move

* Drag and drop to reorder the Options as required.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FTsJHcmtUig8gaJUKdkto%2FScreenshot%202023-10-01%20at%2011.33.44.png?alt=media\&token=554a3726-b61c-4156-8c8e-e86f39508e19)

### Remove

* Click Remove icon to delete an option.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FfYSrhXfKzN25VylWgIdH%2FScreenshot%202023-10-01%20at%2011.37.29.png?alt=media\&token=9fa2eedf-00aa-45fa-a486-9607e1aef392)

The options you have set up will now be available in the Block Inspector, in this example Row or Column.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FxyyAyqsS5XS83sfHmq9l%2FScreenshot%202023-10-01%20at%2011.48.37.png?alt=media&#x26;token=4477a12d-2178-45a9-b63b-897404230382" alt=""><figcaption></figcaption></figure>

## Default

You can now set up a default for you Options Property.

{% hint style="info" %}
You have to set up some options before you can add a default.
{% endhint %}

* In the Components Properties modal, set Default to required option, in the example below Row or Column..

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F2V3B3U8XS61JHNHtzgmB%2FScreenshot%202023-10-11%20at%2011.13.43.png?alt=media&#x26;token=ae7fb5a8-7a4e-4222-80d0-fc17393da5ab" alt=""><figcaption></figcaption></figure>

The option you selected will now be visible on the canvas.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FmGowflvB4fogvLRpVACL%2FScreenshot%202023-10-11%20at%2011.17.14.png?alt=media&#x26;token=0412b59a-b9f5-45f2-9b5c-ceb8285a6ce6" alt=""><figcaption></figcaption></figure>

## Dynamic

If your Option is Dynamic you can toggle on Dynamic.

* Open the Components Properties modal and toggle on Dynamic
* Set Source as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F1unat8OUKjBJzVWNZ5HU%2FScreenshot%202023-10-11%20at%2011.24.43.png?alt=media&#x26;token=541d8a99-0581-48cd-88ca-1f39bd187ed2" alt=""><figcaption></figcaption></figure>

A dynamic data property will now be visible in the Block Inspector.

Depending on the option to which Dynamic is applied, you will have various possibilites.

In this case, dynamic direction will open the Direction Options modal.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FDEda7xchYk6fe2ltPBcE%2FScreenshot%202023-10-11%20at%2011.37.02.png?alt=media&#x26;token=009df0c4-fded-40f9-b335-5578e99936ea" alt=""><figcaption></figcaption></figure>
