# Select

## **Specs**

<table><thead><tr><th width="320">Label</th><th>Value</th></tr></thead><tbody><tr><td><strong>Version</strong></td><td>1.4.0 (updated on 2025-03-04)</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 Select widget empowering users to craft personalized dropdown options within interfaces effortlessly. It grants users the ability to define and curate custom dropdown selections, tailoring choices to suit specific requirements or preferences. What sets it apart is its unique feature allowing users to assign distinct colors to each dropdown option, enhancing visual differentiation and aiding in intuitive navigation or categorization.

## Use case

1. Use this widget to define the gender (Male/Female) of patient.
2. Use this widget to define the status of a project.

## 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
* **Should include additional input** - If true, an additional input will be displayed when this option is selected.\
  Note: Do not include "()" in the option name.

### Examples:

```json
# show the male and female of gender
[
    {
        "option": "Male",
        "color": "#000000"
    },
    {
        "option": "Female",
        "color": "#010101"
    }
]
```

## 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-fe3e285a09ca43766be7fbb30f01634669502737%2Fwidget-column-select-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-5110d4954788086a8d49eef39fc3b6629584ffdf%2Fwidget-column-select-edit.webp?alt=media" alt=""><figcaption></figcaption></figure>

Often, the “Other” option requires additional input. To enable this, simply set “Should include additional input” to true for the “Other” option. Once activated, selecting “Other” will display an additional input field to collect the required 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-6992380ea5aa5ecc02929734fe8792c043e45d9d%2Fwidget-column-select-edit-input.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

Option value in string.

### **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 option value in string.

### **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 option value in string.
