> For the complete documentation index, see [llms.txt](https://docs.work-relay.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.work-relay.com/forms/form-components/fields/multi-select.md).

# Multi-select

## Working with component

[Managing components](https://neostella.gitbook.io/work-relay-documentation/K6d8zoAI1M2x24Qd4SS2/forms/form-components/working-with-form-components#managing-components)

## Component properties

[Components basic properties](https://neostella.gitbook.io/work-relay-documentation/K6d8zoAI1M2x24Qd4SS2/forms/form-components/components-basic-properties)

## Events

[Form input events](https://neostella.gitbook.io/work-relay-documentation/K6d8zoAI1M2x24Qd4SS2/forms/form-building/events)

## View types

There are 3 view types for multi select fields on the form (1):

* Single List
* Dual List
* Checkboxes

![](/files/c373063bacdf2b8dcae901e075abb8e305541c6f)

**Single List** view type allows user to select multiple options holding CTRL (Windows) or Command (macOS) key (2):

![](/files/a2825e70ec4ee9d85858a29ca6e6c8ded72c81b1)

**Dual List** view type allows user to select items in left column and move them to the right (or vice versa) using arrow icons (3):

![](/files/7e37951453adc19e4db2e29362cbec60561d6f64)

**Checkboxes** view type represents select options as a set of checkboxes (4):

![](/files/a8e40e0b427ec99783082846a8372a3d753e9201)

{% hint style="info" %}
Both Single List and Dual List view options have "Size" setting which is used when list(s) height should be fixed.

On the screenshot below "Size" is set to 4. It means that multiple picklist component height is fixed to display 4 rows only.
{% endhint %}

![](/files/f24f0e0fa29e79b7ec47fc5b499d05e611f0f6e0)

## Multi-select dynamic options

For situations when data need to be added to a multi-select dynamically user is to use "Dynamic Options" (5) setting.

![](/files/601652bc3ef171cd03e0c01c31d729017cb3610e)

Options are to be passed as a semicolon-separated values or JSON.

Below are examples of **caseType** variable setup used to store dynamic multi-select options.

### Passing semicolon-separated options

![](/files/0d005b8304e54b4eaf1d0cc159f98d6bb520e065)

Above variable will store case types labels separated with semicolon. Result string will look like following:

`Mechanical;Electrical;Structural;Other;Issue;Question;Idea`

{% hint style="info" %}
When using semicolon-separated values multi-select options keys will be same as options values.
{% endhint %}

### Passing JSON

**Passing JSON** allows one to create multi-select options with labels different from values.

![](/files/62331687e655be50134a26425068cc70864d09dc)

Above setup will result JSON string storing case types as a key:value pairs where key is case type label and value is first 3 characters of the label.

Result string will look like following:

`{"Mechanical":"Mec","Electrical":"Ele","Structural":"Str","Other":"Oth","Issue":"Iss","Question":"Que","Idea":"Ide"}`

{% hint style="info" %}
JSON has to store object with "key":"value" pairs where "key" is option label and "value" is option value: `<br>{"key":"value", "key1":"value1", ... }`
{% endhint %}

To use variable as a source for dynamic multi-select simply add it to "Options" input (6):

{% hint style="info" %}
To learn more about working with variables please refer following article: [Variables](https://w-r.screenstepslive.com/s/12930/m/96431/l/1247080-variables)
{% endhint %}

![](/files/16718282d3dc4f8104a7a2f469dfe7d412ce8730)

## Virtual multi-select default value

User can provide default values separated by semicolon checking proper checkboxes (7):

![](/files/1bf022fd824af15cf1b749ea32d9f483b622240c)

For multiselect using JSON to build dynamic options user is to pass default option values (not labels) separated by semicolon:

![](/files/a135d7bf95d250b2ae8decf3b539e054e5697523)

![](/files/f35fab03e87550f17578fe506030490535685586)

## Multi-select option groups

Option Groups feature provides user with an ability to show specified options in multi-select component based on conditions.

{% hint style="info" %}
Available only when 'Dynamic options' setting is set to false
{% endhint %}

### Standard Option Groups

Select Input Multi Select (8) on a canvas and click "Add Group" button (9) under Option groups:

![](/files/8b5cbf9cebc11b057d95e7adc20450f1d5f5e91c)

Check options to be displayed in multi-select (10), add condition (11) and click "Save changes" button (12):

![](/files/a42e7f2175487d3f914261d692ca7f8abb32bf65)

Above condition will be satisfied for account record with "Prospect" type, those accounts will only have **June** and **July** options displayed for selection. All other accounts will have all three options displayed in multi-select component.

User can have multiple option groups set up for a single multi-select component.

### Generated option groups

User can generate option group for the picklist based on object record type.

Below is SalesForce setup for "MultiSelect" picklist on Account for record type called "Customer Account".

![](/files/748ac449d5b52ca899803b4dc3a7edc5725210b5)

Form source in example below is set to Account.

Select object field "MultiPicklist"(13) on the form. Click "Generate" button (14) on Options Group section and click "Yes" button (15) in popup:

![](/files/f665b043f0040bb48e8c0fd3d22fb535b3422832)

Option group is generated based on the record type setting:

![](/files/05c6dcbb1d68a5647871ce8535a1c1c05eb6ce13)

![](/files/e0053df5dcc1a200370f3ccbfc426c646a19e950)

## Conditional styles

[Form components conditional styling](https://neostella.gitbook.io/work-relay-documentation/K6d8zoAI1M2x24Qd4SS2/forms/basics/conditional-styles)

Input Multi-Select component has following conditional styles options:

* **hide**
* **show**
* **required**
* **disable**
* **clear**