Implementation:FlowiseAI Flowise CredentialFormInputHandler

Knowledge Sources	FlowiseAI Flowise
Domains	Credentials, Forms
Last Updated	2026-02-12 07:00 GMT

Overview

CredentialFormInputHandler (located in the credentials view) is a React component that renders form input fields for credential configuration, supporting string, password, number, boolean, JSON, and options input types with labels, tooltips, warnings, and an expand dialog for multi-line text.

Description

This component dynamically renders the appropriate input control based on inputParam.type: a SwitchInput for booleans, an Input for strings/passwords/numbers (with optional expand dialog for multi-line fields), a JsonEditorInput for JSON, and a Dropdown for options. Each field displays its label with a required indicator (red asterisk) when inputParam.optional is false, an optional TooltipWithParser for descriptions, and a warning banner with an alert icon when inputParam.warning is present. Multi-line string fields include an expand button that opens a dialog for full-screen editing. The component writes values directly to the data object via property assignment.

Usage

Use this component inside the credential add/edit dialog form to render individual credential parameter fields. It is distinct from the canvas-side CredentialInputHandler in that it handles the actual form inputs within the credential management UI rather than the dropdown selection on the canvas.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/credentials/CredentialInputHandler.jsx
• Lines: 1-137

Signature

const CredentialInputHandler = ({ inputParam, data, disabled = false }) => { ... }

export default CredentialInputHandler

Import

import CredentialInputHandler from '@/views/credentials/CredentialInputHandler'

I/O Contract

Inputs

Name	Type	Required	Description
inputParam	object	Yes	The input parameter definition containing name, label, type ('string', 'password', 'number', 'boolean', 'json', 'options'), optional, description, warning, rows, default, and options
data	object	Yes	The credential data object; field values are read from and written to data[inputParam.name]
disabled	boolean	No	Whether all input controls are disabled (defaults to false)

Outputs

Name	Type	Description
Rendered JSX	React Element	A labeled form field with the appropriate input control (Switch, Input, JsonEditor, or Dropdown)
Side effects	void	Mutates data[inputParam.name] directly when the user changes a field value

Usage Examples

Basic Usage

import CredentialInputHandler from '@/views/credentials/CredentialInputHandler'

<CredentialInputHandler
  inputParam={{
    name: 'apiKey',
    label: 'API Key',
    type: 'password',
    optional: false,
    description: 'Your API key for authentication'
  }}
  data={credentialData}
  disabled={false}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Credential_Management