Implementation:FlowiseAI Flowise Input

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

Overview

The Input component is a configurable form input field that supports multiple input types (text, password, number, email) and integrates with the Flowise variable selection system via a popover.

Description

Input is a React component built with Material-UI that renders either an InputBase (for note-type fields with minimal styling) or an OutlinedInput (for standard form fields). It manages its own local state for the input value and automatically opens a SelectVariable popover when the user types {{, allowing insertion of node output variables into the field. The component computes available upstream nodes for variable substitution using the getAvailableNodesForVariable utility.

Usage

Use this component when rendering node parameter inputs on the Flowise canvas that need to accept typed text values and optionally support variable interpolation from upstream nodes.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/input/Input.jsx
• Lines: 1-160

Signature

export const Input = ({ inputParam, value, nodes, edges, nodeId, onChange, disabled = false }) => {
    // ...
}

Import

import { Input } from '@/ui-component/input/Input'

I/O Contract

Inputs

Name	Type	Required	Description
inputParam	object	Yes	Configuration object containing name, type, placeholder, rows, step, and acceptVariable fields
value	string or number	No	Initial value to populate the input field
nodes	array	No	Array of canvas nodes used to compute available variables
edges	array	No	Array of canvas edges used to determine node connectivity
nodeId	string	No	ID of the current node owning this input
onChange	func	Yes	Callback invoked with the new value when the input changes
disabled	bool	No	When true, disables the input field (defaults to false)

Outputs

Name	Type	Description
Rendered JSX	React element	A form input field with an optional variable selection popover

Usage Examples

Basic Usage

<Input
    inputParam={{
        name: 'prompt',
        type: 'string',
        placeholder: 'Enter your prompt...',
        rows: 3,
        acceptVariable: true
    }}
    value="Hello {{question}}"
    nodes={canvasNodes}
    edges={canvasEdges}
    nodeId="node_abc123"
    onChange={(newValue) => handleParamChange('prompt', newValue)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Node_Parameter_Configuration