MultiSelectField Multiselect Dropdown - DingTalk Help Center

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	`'NORMAL'`
`dataSource`	Configures the options	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	`'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	`'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	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`