# MultiSelect

## **Specs**

<table><thead><tr><th width="320">Label</th><th>Value</th></tr></thead><tbody><tr><td><strong>Version</strong></td><td>1.0.0 (updated on 2021-09-16)</td></tr><tr><td><strong>Developer</strong></td><td>Labii Inc.</td></tr><tr><td><strong>Type</strong></td><td>Column</td></tr><tr><td><strong>Support Configuration</strong></td><td>Yes</td></tr><tr><td><strong>Support Readonly view</strong></td><td>Yes</td></tr><tr><td><strong>Support Edit view</strong></td><td>Yes</td></tr><tr><td><strong>Support Form view</strong></td><td>Yes</td></tr><tr><td><strong>Support Default value</strong></td><td>Yes</td></tr><tr><td><strong>Support Import</strong></td><td>Yes</td></tr><tr><td><strong>Allow multiple</strong></td><td>Yes</td></tr></tbody></table>

## Overview

The Labii MultiSelect widget offers users the flexibility to generate tailored dropdown choices while providing the capability to select one or multiple options. This widget empowers users to curate personalized selections within dropdown menus, accommodating diverse needs or preferences. It facilitates the creation of custom options, allowing users to populate the dropdown with choices that align precisely with their requirements. Additionally, the unique feature allowing the selection of multiple options enhances its utility, enabling users to make varied selections as needed within a single interaction, optimizing the user experience and functionality of the interface.

## Use case

1. Use this widget to display the industry of your customer.

## Configuration

To enable the widget's functionality, it requires the provision of options. Each option comprises the following two fields:

* **Dropdown option**
* **Color** - the color to highlight the dropdown option

### Examples:

```json
# show the industry chooses
[
    {"option": "Software"},
    {"option": "Biotech"},
    {"option": "Other"}
]
```

## Views

See the interface of the widget in the following views.

### **Readonly view**

Readonly view display the values of the column.

<figure><img src="https://3607108856-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LHVg57XIRcjV-Vbubtn%2Fuploads%2Fgit-blob-29cafdf07aa0cfef8bc0b5f6f2472fe2bfccf736%2Fwidget-column-multiselect-readonly.webp?alt=media" alt=""><figcaption></figcaption></figure>

### **Edit view**

The Edit view is the interface that allows you to modify the value.

<figure><img src="https://3607108856-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LHVg57XIRcjV-Vbubtn%2Fuploads%2Fgit-blob-93e8a666c1781d7acb508be5735588b7f5cbcd39%2Fwidget-column-multiselect-edit.webp?alt=media" alt=""><figcaption></figcaption></figure>

### **Form view**

The Form view is the field integrated into the add form for collecting values when creating a new record.

The Form view is same as the Edit view.

## Data

Each widget in Labii stores data in a unique manner; refer below to understand how data from this widget is stored.

### Data format

JSON data with keys of `sid` and `name.`

```json
[{"sid": "", "name": ""}]
```

### **Default value**

The Default Value field within the column allows you to specify the default value when a record is created.

Default value shall be the chooses of dropdown separate in `comma(,)`.

`Software, Biotech`

### **Import value**

The Import Value is the value you need to include in your Excel table for it to be imported into Labii.

Import value shall be the the chooses of dropdown separate in `comma(,)`.

`Software, Biotech`
