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

# MultiSelectField Multiselect Dropdown

> Documentation for the MultiSelectField multiselect dropdown component, covering properties such as option data source and tag display for selecting multiple items from a predefined set of options.

## When to Use

* Use it to replace the native select element for choosing from a predefined set of options. Its core capability is selection.

## Component Example

## Component Properties

| Attribute          | Description                                                                                                                                       | Type                                                             | Default                                                                                                                |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `autoWidth`        | Whether the dropdown menu aligns with the selector width                                                                                          | `boolean`                                                        | `true`                                                                                                                 |
| `behavior`         | Display state of the form component                                                                                                               | [Behavior](/open/yida/components/interface#behavior)             | `'NORMAL'`                                                                                                             |
| `dataSource`       | Configures the options                                                                                                                            | [DataSource\[\]](/open/yida/components/interface#datasource)     | `[ { "text": "Option 1", "value": "1" }, { "text": "Option 2", "value": "2" }, { "text": "Option 3", "value": "3" } ]` |
| `filter`           | Local filter method; available only when local filtering is enabled                                                                               | `(value: string[], data: DataSource) => boolean`                 | -                                                                                                                      |
| `filterLocal`      | Disable this option when the data source is remote. Returns a Boolean value that determines whether the option is retained                        | `boolean`                                                        | `true`                                                                                                                 |
| `hasArrow`         | Whether to display the dropdown arrow                                                                                                             | `boolean`                                                        | `true`                                                                                                                 |
| `hasBorder`        | Whether to display a border                                                                                                                       | `boolean`                                                        | `true`                                                                                                                 |
| `hasSelectAll`     | Whether to enable the Select all feature                                                                                                          | `boolean`                                                        | `false`                                                                                                                |
| `label`            | Title of the form component                                                                                                                       | `string`                                                         | -                                                                                                                      |
| `labelAlign`       | Position of the form component title                                                                                                              | `'left' \| 'top'`                                                | `'top'`                                                                                                                |
| `labelColOffset`   | Sets the offset position of the title. The value uses the grid system, where 1 represents 1/24                                                    | `number`                                                         | `0`                                                                                                                    |
| `labelColSpan`     | Sets the width of the title. The value uses the grid system, where 1 represents 1/24                                                              | `number`                                                         | `4`                                                                                                                    |
| `labelTextAlign`   | Alignment of the form component title                                                                                                             | `'left' \| 'right'`                                              | `'right'`                                                                                                              |
| `labelTipsIcon`    | Icon for the tips entry of the form component title. Takes effect when `labelTipsTypes` is set to **text** or **render**                          | `string`                                                         | -                                                                                                                      |
| `labelTipsRender`  | Custom render method for the tips of the form component title. Takes effect when `labelTipsTypes` is set to **render**                            | `(props: IComponentProps) => ReactNode`                          | -                                                                                                                      |
| `labelTipsText`    | Tips text for the form component title. Takes effect when `labelTipsTypes` is set to **text**                                                     | `string`                                                         | -                                                                                                                      |
| `labelTipsTypes`   | Type of tips displayed for the form component title                                                                                               | [LabelTipsTypes](/open/yida/components/interface#labeltipstypes) | `'none'`                                                                                                               |
| `notFoundContent`  | Text displayed when no results are found                                                                                                          | `string`                                                         | -                                                                                                                      |
| `onChange`         | Event triggered when the component value changes. `actionType` indicates the trigger type. Available values: `'itemClick'`, `'enter'`, `'change'` | `({value: string, actionType:string, item:Data}) => void`        | -                                                                                                                      |
| `onRemove`         | Event triggered when a value is deleted                                                                                                           | `(item: DataSource) => void`                                     | -                                                                                                                      |
| `onSearch`         | Event triggered when the value in the search box changes                                                                                          | `(keyword: string) => void`                                      | -                                                                                                                      |
| `onVisibleChange`  | Event triggered when the pop-up layer is shown or hidden                                                                                          | `(visible: boolean) => void`                                     | -                                                                                                                      |
| `onVisibleChange`  | Event triggered when the pop-up layer is shown or hidden                                                                                          | `(visible: boolean) => void`                                     | -                                                                                                                      |
| `placeholder`      | Placeholder text of the form component                                                                                                            | `string`                                                         | `'Please select'`                                                                                                      |
| `searchDelay`      | Search delay, in milliseconds                                                                                                                     | `number`                                                         | `300`                                                                                                                  |
| `showSearch`       | Whether search is enabled after expansion. Fixed to `true` in tag mode                                                                            | `boolean`                                                        | `true`                                                                                                                 |
| `showSearch`       | Whether search is enabled after expansion. Fixed to `true` in tag mode                                                                            | `boolean`                                                        | `true`                                                                                                                 |
| `size`             | Size of the form component                                                                                                                        | [Size](/open/yida/components/interface#size)                     | `'medium'`                                                                                                             |
| `tips`             | Description of the form component, displayed below the control                                                                                    | `string`                                                         | -                                                                                                                      |
| `useDetailValue`   | Sets the value to use the object type \{label, value}                                                                                             | `boolean`                                                        | `false`                                                                                                                |
| `validation`       | Validation settings of the form component. For details, see the [Form Validation documentation](/open/yida/guide/concept/validation)              | [Validation\[\]](/open/yida/components/interface#validation)     | `[]`                                                                                                                   |
| `value`            | Default value of the current component                                                                                                            | `string[]`                                                       | -                                                                                                                      |
| `wrapperColOffset` | Sets the offset position of the form component. The value uses the grid system, where 1 represents 1/24                                           | `number`                                                         | `0`                                                                                                                    |
| `wrapperColSpan`   | Sets the width of the form component. The value uses the grid system, where 1 represents 1/24                                                     | `number`                                                         | `0`                                                                                                                    |