---
title: "Multi-Select Dropdown Component"
slug: "multi-select-dropdown-component"
updated: 2026-09-15T17:54:51Z
published: 2026-09-15T17:54:51Z
canonical: "docs.unqork.io/multi-select-dropdown-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Multi-Select Dropdown Component

The Multi-Select Dropdown component lets end-users select one or more options from a searchable drop-down list. Options can be defined manually, fetched from a URL, or loaded from another field. It includes advanced options for auto-selection behavior, clear buttons, item templates, and more.

> **How to read settings tables**
> 
> The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: `inline code` — a value to type exactly as shown | **Bold** — a value selected from a drop-down, radio button, tab, or choice chip | **ON**/**OFF** — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

## General Settings

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Property ID | `key` | Text input | `udMultiSelect` | The unique identifier for this component instance. |

## Display Settings

![Multi-Select Dropdown Component — display settings](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20260915_174946_9bcffd1a49504f679f2e610ef9f14403.png?sv=2026-02-06&spr=https&st=2026-10-31T12%3A16%3A05Z&se=2026-10-31T13%3A16%3A05Z&sr=c&sp=r&sig=2MRyQAtbQNDDvK9%2BJ14sHiN73LYE3CEKasU%2BlOYuh%2BU%3D)

### Field Text

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Label Text | `label` | Text input | — | Identifies the component on the canvas and informs end-users what information is requested. |
| Placeholder Text | `placeholder` | Text input | — | Hint text displayed inside the drop-down before a selection is made. |

### Contextual Help

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Tooltip | `description` | Text input | — | A brief description that displays when a cursor is positioned over the tooltip icon. |

### Formatting

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Allow Multiple Selections | `multiple` | Toggle | OFF | Lets end-users select more than one option from the list. |
| Auto-select Highlighted Option When Clicking Outside | `autoSelectOnExit` | Toggle | ON | Automatically selects the highlighted option when the end-user clicks outside the drop-down. |
| Show Clear Button | `showClearButton` | Toggle | OFF | Displays a button that clears the currently selected value. |
| Hide Chevron | `hideChevron` | Toggle | OFF | Hides the drop-down chevron icon. |
| Set Dropdown Menu Height | `limitToRows` | Number input | — | Limits the number of rows visible in the drop-down menu simultaneously. |
| Item Template | `template` | Text input | `<span>{{ item.label }}</span>` | An HTML template for rendering each option in the drop-down list. |

### Default State Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Behavior | — | Drop-down | **Enable User Input** | Sets how end-users can interact with the field. |
| Hide Field | `hidden` | Toggle | OFF | Hides the component from end-users but always displays in the Module Builder. |

> - **Enable User Input** (default): End-users can make selections in the drop-down.
> - **Disable User Input** (`disabled`): Prevents end-users from making a selection. The component displays with an altered appearance to indicate it is not editable.
> - **Read Only - Legacy** (`readOnlyView`): Displays the stored value as plain text without the drop-down input. Shows `None` when empty.

## Data Settings

![Multi-Select Dropdown Component — data settings](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20260915_174946_b22ce8af352a47e49bceb3b2463750d8.png?sv=2026-02-06&spr=https&st=2026-10-31T12%3A16%3A05Z&se=2026-10-31T13%3A16%3A05Z&sr=c&sp=r&sig=2MRyQAtbQNDDvK9%2BJ14sHiN73LYE3CEKasU%2BlOYuh%2BU%3D)

### Data Source Type

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Data Source Type | `dataSrc` | Choice chip | **Values** | Sets how options are loaded. |

  

> **Values** — Manually define a list of options.
> 
> | Column | Field | Type | Description |
> | --- | --- | --- | --- |
> | Option Label | `label` | Text input | The display text shown to end-users for each option. |
> | Data Source Values | `value` | Text input | The value stored when the option is selected. |

  

> **URL** — Fetch options from an external endpoint.
> 
> HTTP request headers to include with the data fetch:
> 
> | Column | Field | Type | Description |
> | --- | --- | --- | --- |
> | Request Header | `label` | Text input | The HTTP request header name. |
> | Header Values | `value` | Text input | The value for the header. |
> 
> | Setting | Field | Type | Default | Description |
> | --- | --- | --- | --- | --- |
> | Service | `service` | Service selector | — | A configured service to use as the data source. |
> | Data Source URL | `data.url` | Text input | — | A URL that returns a JSON array to use as the option source. |
> | Data Path | `selectValues` | Text input | — | The property in the response where iterable items reside. |
> | Filter Query | `filter` | Text input | — | Additional filtering using query parameters. |
> | Refresh On | `refreshOn` | Property ID | — | Triggers a data refresh when the specified field changes. |
> | Limit Number of Items | `limit` | Number input | — | Limits the number of items returned per page. |
> | Disable Limiting Response | `data.disableLimit` | Toggle | OFF | Excludes limit and skip parameters from the query string. |
> | Search Parameters are Required | `hasRequiredFields` | Toggle | OFF | Prevents the fetch from executing if required search parameters are absent. |
> | Clear Value On Refresh | `data.clearOnRefresh` | Toggle | OFF | Clears the selected value when the Refresh On field changes. |
> | Authenticate | `data.authenticate` | Toggle | OFF | Sends authentication headers from the application with the request. |
> | Disable filter application | `preventInnerFilter` | Toggle | OFF | Prevents the component from applying its internal filter to results. |
> | Value Property | `valueProperty` | Text input | — | The property in each item to use as the stored value. |
> | Search Query Name | `searchField` | Text input | — | The URL query parameter name used to send the end-user's search text to the server. |
> | Refresh Delay | `refreshDelay` | Number input | `250` | Sets the delay after the end-user stops typing before sending the search request, in milliseconds (ms). |

  

> **Data Reference Key** — Load options from another module field.
> 
> | Setting | Field | Type | Default | Description |
> | --- | --- | --- | --- | --- |
> | Data Reference Key | `data.dataReferenceKey` | Property ID | — | The Property ID of a field that returns a JSON array to use as the option source. |
> | Limit Number of Items | `labelPath` | Number input | — | Limits the number of items returned. |
> | Refresh On | `refreshOn` | Property ID | — | Triggers a data refresh when the specified field changes. |

### Data Storage

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Store Data in Database | `persistent` | Toggle | ON | When set to **ON**, this setting this setting stores field values to the database when the module saves, end-users navigate between Panel components, or end-users navigate between workflow screens. Set to **OFF** to exclude this field from server-side submissions. |

> [!NOTE]
> Fields with **Store Data in Database** set to **OFF** are excluded from Plug-In component's API responses and Unqork's built-in tracker. When using a Plug-In component to remote-execute a module, any component whose value must be included in the API response requires **Store Data in Database** set to **ON**.

## Actions Settings

![Multi-Select Dropdown Component — actions settings](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20260915_174946_8287661bc6b1486da5613b6e5c910acf.png?sv=2026-02-06&spr=https&st=2026-10-31T12%3A16%3A05Z&se=2026-10-31T13%3A16%3A05Z&sr=c&sp=r&sig=2MRyQAtbQNDDvK9%2BJ14sHiN73LYE3CEKasU%2BlOYuh%2BU%3D)

### Triggers

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Trigger | `listener` | Property ID | — | Triggers another component when the selection changes. |

## Validation Settings

![Multi-Select Dropdown Component — validation settings](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20260915_174946_b26be63baa824da18cbff6a90d9a6206.png?sv=2026-02-06&spr=https&st=2026-10-31T12%3A16%3A05Z&se=2026-10-31T13%3A16%3A05Z&sr=c&sp=r&sig=2MRyQAtbQNDDvK9%2BJ14sHiN73LYE3CEKasU%2BlOYuh%2BU%3D)

### User Input

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Required | `validate.required` | Toggle | OFF | Requires a selection before the module can be submitted. |
| Required Error Message | `errors.required` | Text input | `is required` | Displays when the required field has no selection. |

## Advanced Settings

![Multi-Select Dropdown Component — advanced settings](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20260915_174946_31ee13b03fbc4c918de17c3ed59cd42f.png?sv=2026-02-06&spr=https&st=2026-10-31T12%3A16%3A05Z&se=2026-10-31T13%3A16%3A05Z&sr=c&sp=r&sig=2MRyQAtbQNDDvK9%2BJ14sHiN73LYE3CEKasU%2BlOYuh%2BU%3D)

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Require Unique Submission Data | `unique` | Toggle | OFF | Ensures the selected value has not been submitted before in another submission. |
| Don't Allow Unique Values | `noValueAdjust` | Toggle | OFF | Prevents end-users from adding a value that does not already exist in the option list. |
| Custom CSS Class | `customClass` | Text input | — | A CSS class applied to the component for custom styling. |

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages.

Rendering is the process of loading components and displaying the final result on the front-end screen.

The VCS (version control system) Contributor role has permissions to edit modules in a branch. Set contributors during the VCS Create a Branch process.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

An API endpoint is the location where an API receives requests for a specific resource on its server. It's the point of contact between an API client and an API server, and is usually a uniform resource locator (URL) that provides the location of the resource.

HTTP (Hypertext Transfer Protocol) is an application-layer protocol used to transmit hypermedia documents like HTML.

Fetching is the process of retrieving data from a database, making it available to the application and the end-user.

JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data.

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

A JavaScript property is a member of an object that associates a key with a value. A JavaScript object is a data structure that stores a collection of properties.

A query lets you retrieve, access, manipulate, and delete data in a database.

A string is an object that represents a sequence of characters. Strings typically hold data represented in text form.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.