Implementation:FlowiseAI Flowise Dropdown

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

Overview

Dropdown is a React single-select autocomplete component built on Material UI's Autocomplete that supports option images, descriptions, free-form input, and custom styled popper rendering.

Description

This component wraps Material UI's Autocomplete with a custom styled Popper (with box shadow and rounded borders) to provide a searchable single-selection dropdown. Each option can display an image (imageSrc), a label, and a description. The selected option's image is shown as a start adornment in the text field. The component maintains an internal value state, matches options by name property, and supports features like freeSolo (allowing arbitrary text), disableClearable, disabled, and loading states. It reads the dark mode setting from the Redux customization store to adjust description text color.

Usage

Use this component for any single-value selection in node configuration forms, such as selecting a model, credential, or other named option from a list.

Code Reference

Source Location

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

Signature

export const Dropdown = ({
    name, value, loading, options, onSelect,
    disabled = false, freeSolo = false, disableClearable = false
}) => { ... }

Dropdown.propTypes = {
    name: PropTypes.string,
    value: PropTypes.string,
    loading: PropTypes.bool,
    options: PropTypes.array,
    freeSolo: PropTypes.bool,
    onSelect: PropTypes.func,
    disabled: PropTypes.bool,
    disableClearable: PropTypes.bool
}

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
name	string	Yes	Identifier for the autocomplete element
value	string	No	Initial selected value (matched against option.name)
loading	bool	No	Shows a loading state in the autocomplete
options	array	Yes	Array of option objects with name, label, description, and optional imageSrc
onSelect	func	Yes	Callback invoked with the selected option's name string
disabled	bool	No	Disables the dropdown (default: false)
freeSolo	bool	No	Allows free-form text input (default: false)
disableClearable	bool	No	Prevents clearing the selection (default: false)

Outputs

Name	Type	Description
React Element	JSX.Element	Renders a FormControl wrapping an Autocomplete component

Usage Examples

Basic Usage

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

const options = [
    { name: 'gpt-4', label: 'GPT-4', description: 'Most capable model' },
    { name: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo', description: 'Fast and efficient' }
]

const MyComponent = () => (
    <Dropdown
        name="modelSelect"
        value="gpt-4"
        options={options}
        onSelect={(value) => console.log('Selected:', value)}
    />
)

Related Pages

• Principle:FlowiseAI_Flowise_Dynamic_Form_Input