> For the complete documentation index, see [llms.txt](https://docs.quickdev.cloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quickdev.cloud/applications/application-editor/visual-components/option-lists.md). # Option lists A dropdown menu facilitates easy and error-free user input by presenting a list of possible options. QuickDEV provides support for implementing option lists using components like **Select** and **Multiselect**. You can configure an option list either manually or by mapping data from your data sources.

## Properties Each option list has four properties. * **Label**: the displayed text of the option to users * **Value**: the unique identifier of the option * **Disabled**: disable the option (the default value is `false`) * **Hidden**: hide the option (the default value is `false`)

{% hint style="warning" %} When more than one option in one list uses the same value, only the first option is valid and thus displayed. {% endhint %} ## Manual mode Under **Basic** > **Manual**, select **+ Add** to create a new option. Choose an option to manually configure it. You can use the `···` option to **Duplicate** or **Delete** an option, and rearrange their positions by dragging the `⋮⋮` handle.

Verify the value of the selected option under **Components** in the data browser. For instance, if **New York** is selected, you'll find the string value `"1"` for **locationSelect**.

Manual mode is recommended for the following scenarios: * For circumstances in which options must be manually managed and enumerated. * Used by a single component. * Data does not come from data sources. ## Mapped mode When working with option list data supplied from data sources, transformers, or dynamic variables, use Mapped Mode. Enter your data source array in the Data field of Basic > Mapped, using JavaScript (JS). This array will be used to automatically map a set of choices. To obtain university information, use `{{university.data}}`. The output array contains `country`, `web_pages`, `alpha_two_code`, and `name`.

You can access the value of any field of an option through the `item` and its index `i`, starting from `0`. In the following example, the **Label** of each option represents the `name` of the university, while the **Value** corresponds to the `web_page`.

Options containing an opening parenthesis `(` in their names are disabled. The default value is set to the `web_pages` of the first item using `{{university.data[0].web_pages}}`. It's important to note that the default value of an option list should be an element from the **Value** array, not the **Label** array.