Implementation:FlowiseAI Flowise MultiDropdown

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Form Controls
Last Updated	2026-02-12 07:00 GMT

Overview

MultiDropdown is a React multi-select autocomplete component built on Material UI's Autocomplete that allows users to select multiple options and returns the selection as a JSON-stringified array of names.

Description

This component wraps Material UI's Autocomplete with the multiple and filterSelectedOptions props, using a custom styled Popper (with box shadow and rounded borders). It parses the incoming value (which may be a JSON string array or an array) to find matching options by name, and on change serializes the selected option names back to a JSON string via JSON.stringify. Each option renders its label and optional description, with description color adjusted based on the Redux customization.isDarkMode state. The component supports disabled, disableClearable, and custom formControlSx styling.

Usage

Use this component for any multi-value selection in node configuration forms, such as selecting multiple tools, output parsers, or categories from a list.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/dropdown/MultiDropdown.jsx
• Lines: 1-96

Signature

export const MultiDropdown = ({
    name, value, options, onSelect,
    formControlSx = {}, disabled = false, disableClearable = false
}) => { ... }

MultiDropdown.propTypes = {
    name: PropTypes.string,
    value: PropTypes.string,
    options: PropTypes.array,
    onSelect: PropTypes.func,
    disabled: PropTypes.bool,
    formControlSx: PropTypes.object,
    disableClearable: PropTypes.bool
}

Import

import { MultiDropdown } from '@/ui-component/dropdown/MultiDropdown'

I/O Contract

Inputs

Name	Type	Required	Description
name	string	Yes	Identifier for the autocomplete element
value	string	No	Initial selected values as a JSON-stringified array of option name strings
options	array	Yes	Array of option objects with name, label, and optional description
onSelect	func	Yes	Callback invoked with a JSON-stringified array of selected option name strings (or empty string if none selected)
disabled	bool	No	Disables the dropdown (default: false)
formControlSx	object	No	Additional MUI sx styles applied to the FormControl wrapper
disableClearable	bool	No	Prevents clearing the selection (default: false)

Outputs

Name	Type	Description
React Element	JSX.Element	Renders a FormControl wrapping a multi-select Autocomplete component

Usage Examples

Basic Usage

import { MultiDropdown } from '@/ui-component/dropdown/MultiDropdown'

const options = [
    { name: 'calculator', label: 'Calculator', description: 'Perform calculations' },
    { name: 'web-search', label: 'Web Search', description: 'Search the internet' },
    { name: 'code-interpreter', label: 'Code Interpreter', description: 'Execute code' }
]

const MyComponent = () => (
    <MultiDropdown
        name="toolSelect"
        value='["calculator","web-search"]'
        options={options}
        onSelect={(value) => console.log('Selected:', value)}
    />
)

Related Pages

• Principle:FlowiseAI_Flowise_Dynamic_Form_Input