Implementation:FlowiseAI Flowise SelectVariable

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

Overview

The SelectVariable component presents a scrollable list of selectable variable options (question, chat_history, file_attachment, upstream node outputs, and sequential agent state) for inserting variable references into input fields.

Description

SelectVariable renders a list of predefined variable choices and dynamically-computed upstream node output options inside a PerfectScrollbar container. Each item is displayed as a ListItemButton with an icon avatar and descriptive text. Clicking an item constructs a variable template string (e.g., Template:Question or Template:NodeId.data.instance) and passes it to the onSelectAndReturnVal callback. When the isSequentialAgent flag is true, additional state message selection options (such as $flow.state.messages and indexed message accessors) are appended to the list.

Usage

This component is used inside Popover elements within the Input and JsonEditorInput components to allow users to pick a variable reference when the input parameter has acceptVariable enabled.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/json/SelectVariable.jsx
• Lines: 1-276

Signature

const SelectVariable = ({ availableNodesForVariable, disabled = false, onSelectAndReturnVal, isSequentialAgent }) => {
    // ...
}
export default SelectVariable

Import

import SelectVariable from '@/ui-component/json/SelectVariable'

I/O Contract

Inputs

Name	Type	Required	Description
availableNodesForVariable	array	No	Array of upstream node objects whose outputs can be referenced as variables
disabled	bool	No	When true, hides the variable selection panel entirely (defaults to false)
onSelectAndReturnVal	func	Yes	Callback invoked with the constructed variable template string (e.g., Template:Question)
isSequentialAgent	bool	No	When true, appends sequential agent state message selection options

Outputs

Name	Type	Description
Rendered JSX	React element	A scrollable list of variable options with icons and descriptions

Usage Examples

Basic Usage

<Popover open={isOpen} anchorEl={anchorEl} onClose={handleClose}>
    <SelectVariable
        availableNodesForVariable={upstreamNodes}
        onSelectAndReturnVal={(variableString) => {
            insertVariable(variableString)
            handleClose()
        }}
        isSequentialAgent={false}
    />
</Popover>

Related Pages

• Principle:FlowiseAI_Flowise_Node_Parameter_Configuration