# Multi-Select Field

**Adding component**

* Virtual input field:  [Adding virtual fields to the form](/components/forms/components/add-and-remove-form-components.md#virtual-fields)
* Object multi-select field: [Adding data source fields](/components/forms/components/add-and-remove-form-components.md#data-source-fields)

**Basic properties**

* [Components Basic Properties](/components/forms/components/components-basic-properties.md)
* View types:
  * Single List
  * Dual List
  * Checkboxes

<img src="/files/sLrFwborieJS47B18wvx" alt="" class="gitbook-drawing">

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

<img src="/files/A2eJyd40BRKyznfSHjLZ" alt="" class="gitbook-drawing">

To choose options from the **Dual List** one has to select items in left column and move them to the right (or vice versa) using arrow icons <img src="/files/WY8onGoe1mbt196CrW8s" alt="" data-size="line">:

<img src="/files/AKKctUtfI6ARJWYi3iYk" alt="" class="gitbook-drawing">

**Checkboxes** view type represents select options as a checkboxes list:

<img src="/files/6Il3sAaFGD4rbVOQGojB" alt="" class="gitbook-drawing">

Both **Single List** and **Dual List** view options have "Size" setting which is used when list height should be fixed. On screenshots below "Size" is set to 4. It means that multi picklist component height is fixed to display 4 rows only.

**Object field:**

<img src="/files/yld04hAsMu4sUfj3ihrK" alt="" class="gitbook-drawing">

**Virtual field:**

<img src="/files/669bKJNLswHibOZYmwbW" alt="" class="gitbook-drawing">

### Multi-select Dynamic Options (for Virtual Fields Only)

For situations when data need to be added to a multi-select dynamically one is to use "Dynamic options" setting:

<img src="/files/6vHECicLv96X6qsxKqTV" alt="" class="gitbook-drawing">

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**:

<img src="/files/8Dc6uhtfOXjB4fpJ8lYX" alt="" class="gitbook-drawing">

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" %}
NOTE: When using semicolon separated values multi-select options keys will be same as options values.
{% endhint %}

**Passing JSON** allows user to create multi-select options with labels different from values:

<img src="/files/ua2dwtEwJANiQQSqt2gO" alt="" class="gitbook-drawing">

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" %}
NOTE: JSON has to store object with "key":"value" pairs where "key" is option label and "value" is option value:

{"key":"value", "key1":"value1", ... }
{% endhint %}

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

{% hint style="success" %}
To learn more about variables please read article about how to work with form variables
{% endhint %}

<img src="/files/pVybEE6SQqu7Q8jMaeln" alt="" class="gitbook-drawing">

### Virtual multi-select default value

User can provide default values separated by semicolon (see below):

<img src="/files/1vfKnc2E40EZZ7dczeqR" alt="" class="gitbook-drawing">

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

<img src="/files/0wWFSdwD0Qaeo2xD3wLX" alt="" class="gitbook-drawing">

<img src="/files/ABOLReNCmcG3nMBl8Qib" alt="" class="gitbook-drawing">

### Multi-select option groups

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

### Object-determined Option Groups

These Option Groups are not shown in the From Builder. It is a standard Salesforce feature that allows to configure available options depending on Record Type of the object record.

To turn them on check "Use Standard Field Dependencies" checkbox on the field properties:

<img src="/files/Q9xZTOsXOB2lzHdwSjG0" alt="" class="gitbook-drawing">

These Option Groups are configured by administrator in the proper Object Settings:

Setup -> Object Manager -> Some Object -> Record Types - >Some Record Type -> "Picklist Available for Editing" section -> click "Edit" on necessary Multi field:

<img src="/files/CccKiFNtXuHFoO79FGGx" alt="" class="gitbook-drawing">

Select options available for that Record Type:

<img src="/files/NWc4jiQetkO565KdmIcO" alt="" class="gitbook-drawing">

### Standard Option Groups

{% hint style="info" %}
Available only when "Dynamic options" are turned off (unchecked)
{% endhint %}

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

<img src="/files/bkZb95GsIa8S9mlD9yID" alt="" class="gitbook-drawing">

Popup will be shown. Check options to be displayed in multi-select (10), add conditions (11) and click "Save changes" button (12):

<img src="/files/vY2uy0pDFbNPo0QxMKGo" alt="" class="gitbook-drawing">

Above rule will be satisfied for "Stub" Object record with type = "Type 1"; those stub records will only have "One Value" and "Two Value" options displayed for selection. All other stubs will have all 7 options displayed in multi-select component.

{% hint style="info" %}
User can have multiple option groups set up for a single multi-select component. This is very useful for different conditions.

E.g.:

* there is a "Country" picklist with country options (US, Canada)
* there is a multi field with checkboxes that represent some states/provinces of both these countries (California, Ohio, Oklahoma, Ontario, Quebec)
* multi has 2 option groups:
  * California, Ohio, Oklahoma with conditions set to "Country = US"
  * Ontario, Quebec with conditions set to "Country = Canada"
* when user selects "US" in picklist, US states will be shown; when user selects "Canada" - canadian provinces.
  {% endhint %}

**Events:** [Form Input Events](/components/forms/tools/event.md#form-input-events)

**Conditional styles**

* [Form components conditional styling](/components/forms/basics/working-with-conditional-styles.md#configure-conditional-styles)
* This component has following conditional styles available:
  * hide
  * show
  * required
  * disable
  * clear


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flexikanban.ai/components/forms/components/multi-select-field.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.