Implementation:FlowiseAI Flowise AsyncDropdown

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

Overview

AsyncDropdown is a reusable autocomplete dropdown component that asynchronously fetches its options from the server based on node configuration or credential names.

Description

This React component wraps MUI's Autocomplete to provide a dropdown that dynamically loads its options on mount. It supports two data-fetching modes: loading options via a node's loadMethod API endpoint, or loading credential lists by credential name. The component supports single and multiple selection, free-form text entry (freeSolo), option images, a "Create New" option trigger, and integrates with the ReactFlow canvas context to pass previous node data for context-aware option loading.

Usage

Use this component in node configuration panels where dropdown options must be fetched from the server at render time, such as model name selection, credential picking, or any dynamic list that depends on the node's current configuration and upstream nodes.

Code Reference

Source Location

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

Signature

export const AsyncDropdown = ({
    name,
    nodeData,
    value,
    onSelect,
    isCreateNewOption,
    onCreateNew,
    credentialNames = [],
    disabled = false,
    freeSolo = false,
    disableClearable = false,
    multiple = false,
    fullWidth = false
}) => {
    // Fetches options asynchronously from node-load-method API or credentials API
    // Renders MUI Autocomplete with optional images, loading indicator, and tooltips
}

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
name	string	Yes	Parameter name used to identify which input param to load options for
nodeData	object	Yes	Node data object containing inputParams, name, id, and inputs
value	string	No	Currently selected value or JSON-stringified array for multi-select
onSelect	func	Yes	Callback invoked with the selected value string
isCreateNewOption	bool	No	Whether to append a "Create New" option to the list
onCreateNew	func	No	Callback invoked when the "Create New" option is selected
credentialNames	array	No	Array of credential type names to fetch credential lists instead of node options
disabled	bool	No	Whether the dropdown is disabled (default: false)
freeSolo	bool	No	Whether to allow free-form text input (default: false)
disableClearable	bool	No	Whether to disable the clear button (default: false)
multiple	bool	No	Whether to allow multiple selections (default: false)
fullWidth	bool	No	Whether the dropdown takes full container width (default: false)

Outputs

Name	Type	Description
Rendered Autocomplete	JSX.Element	A styled MUI Autocomplete component with async-loaded options
onSelect(value)	string	The selected option name, or JSON-stringified array for multi-select

Helper Functions

fetchList

const fetchList = async ({ name, nodeData, previousNodes, currentNode }) => {
    // Calls POST /api/v1/node-load-method/{nodeData.name}
    // Passes nodeData, loadMethod, previousNodes, currentNode, and credential info
    // Returns array of { label, name, description?, imageSrc? } objects
}

Usage Examples

Basic Usage

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

// Single selection for model name
<AsyncDropdown
    name="modelName"
    nodeData={nodeData}
    value={selectedModel}
    onSelect={(value) => setSelectedModel(value)}
/>

// Multiple selection with credential loading
<AsyncDropdown
    name="credential"
    nodeData={nodeData}
    value={selectedCredentials}
    onSelect={(value) => setSelectedCredentials(value)}
    credentialNames={['openAIApi']}
    isCreateNewOption={true}
    onCreateNew={() => openCredentialDialog()}
    multiple={true}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Dynamic_Form_Input