# optionList

## Overview

{% hint style="info" %}
**Version compatibility**

`optionList` was introduced in version **4.23.0** of the JourneyApps Container.
{% endhint %}

`optionList` displays a list of options to the user. `optionList` needs to be triggered from the JavaScript/TypeScript.

{% hint style="info" %}
If more than 12 items are displayed, a type-ahead filter is included.
{% endhint %}

### **Basic Example**

{% code title="main.js" %}

```javascript
var options = [
	"Add a new beneficiary", "Select an existing beneficiary", "Delete all my beneficiaries"
];

// The optionList is created as follows:
var result = optionList(options);

// When a user clicks, the result can be evaluated as follows:
if (result == 0) {
    // The user clicked on "Add a new beneficiary"
}
else if (result == 2) {
    // The user clicked on "Delete all my beneficiaries"
}
if (result == -1) {
    // The user canceled the optionList
}
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-bc53c90f31255166fc2af1abc19ab561ecc2fa60%2Foptionlist-example.png?alt=media)

{% hint style="info" %}
**Appearance**

* On a mobile device, the `optionList` takes up the entire screen.
* On desktop, the `optionList` is displayed in the centre of the screen.
  {% endhint %}

## Configuration

{% code title="main.js" %}

```javascript
var result = optionList(arrayOfButtons, additionalOptions);
```

{% endcode %}

| Parameter           | Required   | Details                                                                                                                                                                            |
| ------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `arrayOfButtons`    | *Required* | An array of strings denoting the text of the options                                                                                                                               |
| `additionalOptions` | *Optional* | <p>An object with one or more of the following properties:</p><ul><li>title: (String) The title of the optionList<br>Defaults to <code>Choose an option</code>.</li><li></li></ul> |

*Returns:* The index of the selected option. If the user cancels the `optionList`, `-1` will be returned.