diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
index df4f92ef1d..5b770b25c4 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
@@ -217,7 +217,7 @@ const ConditionItem = ({
     const newCondition = produce(condition, (draft) => {
       draft.variable_selector = valueSelector
       draft.varType = resolvedVarType
-      draft.value = resolvedVarType === VarType.boolean ? 'false' : ''
+      draft.value = resolvedVarType === VarType.boolean ? false : ''
       draft.comparison_operator = getOperators(resolvedVarType)[0]
       setTimeout(() => setControlPromptEditorRerenderKey(Date.now()))
     })
@@ -225,6 +225,14 @@ const ConditionItem = ({
     setOpen(false)
   }, [condition, doUpdateCondition, availableNodes, isChatMode, setControlPromptEditorRerenderKey])
 
+  const showBooleanInput = useMemo(() => {
+    if(condition.varType === VarType.boolean)
+      return true
+    // eslint-disable-next-line sonarjs/prefer-single-boolean-return
+    if(condition.varType === VarType.arrayBoolean && [ComparisonOperator.contains, ComparisonOperator.notContains].includes(condition.comparison_operator))
+      return true
+    return false
+  }, [condition])
   return (
     <div className={cn('mb-1 flex last-of-type:mb-0', className)}>
       <div className={cn(
@@ -278,7 +286,7 @@ const ConditionItem = ({
           />
         </div>
         {
-          !comparisonOperatorNotRequireValue(condition.comparison_operator) && !isNotInput && condition.varType !== VarType.number && condition.varType !== VarType.boolean && (
+          !comparisonOperatorNotRequireValue(condition.comparison_operator) && !isNotInput && condition.varType !== VarType.number && !showBooleanInput && (
             <div className='max-h-[100px] overflow-y-auto border-t border-t-divider-subtle px-2 py-1'>
               <ConditionInput
                 disabled={disabled}
@@ -291,7 +299,7 @@ const ConditionItem = ({
           )
         }
         {
-          !comparisonOperatorNotRequireValue(condition.comparison_operator) && !isNotInput && condition.varType === VarType.boolean && (
+          !comparisonOperatorNotRequireValue(condition.comparison_operator) && !isNotInput && showBooleanInput && (
             <div className='p-1'>
               <BoolValue
                 value={condition.value as boolean}
diff --git a/web/app/components/workflow/nodes/if-else/use-config.ts b/web/app/components/workflow/nodes/if-else/use-config.ts
index 473b457e00..3fbc3f1a5f 100644
--- a/web/app/components/workflow/nodes/if-else/use-config.ts
+++ b/web/app/components/workflow/nodes/if-else/use-config.ts
@@ -144,7 +144,7 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
           varType: varItem.type,
           variable_selector: valueSelector,
           comparison_operator: getOperators(varItem.type, getIsVarFileAttribute(valueSelector) ? { key: valueSelector.slice(-1)[0] } : undefined)[0],
-          value: varItem.type === VarType.boolean ? 'false' : '',
+          value: varItem.type === VarType.boolean ? false : '',
         })
       }
     })
diff --git a/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx b/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx
index 52e1e93c55..e4cc13835f 100644
--- a/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx
@@ -134,7 +134,7 @@ const FormItem = ({
         value_type === ValueType.constant && var_type === VarType.arrayBoolean && (
           <ArrayBoolList
             className='mt-2'
-            list={value || ['false']}
+            list={value || [false]}
             onChange={handleChange}
           />
         )
diff --git a/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx b/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx
index db63286efb..3243f8d1ed 100644
--- a/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx
@@ -48,9 +48,9 @@ const Item = ({
       return undefined
     switch (varType) {
       case VarType.boolean:
-        return 'false'
+        return false
       case VarType.arrayBoolean:
-        return ['false']
+        return [false]
       default:
         return undefined
     }
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/bool-value.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/bool-value.tsx
index 3de2b30975..864fefd9a2 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/bool-value.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/bool-value.tsx
@@ -1,25 +1,21 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback } from 'react'
 import OptionCard from '../../../nodes/_base/components/option-card'
 
 type Props = {
-  value: boolean | string
-  onChange: (value: string) => void
+  value: boolean
+  onChange: (value: boolean) => void
 }
 
 const BoolValue: FC<Props> = ({
   value,
   onChange,
 }) => {
-  const booleanValue = useMemo(() => {
-    if(typeof value === 'boolean')
-      return value
-    return value === 'true'
-  }, [value])
+  const booleanValue = value
   const handleChange = useCallback((newValue: boolean) => {
     return () => {
-      onChange(newValue.toString()) // the backend expects a string value: 'true' or 'false'
+      onChange(newValue)
     }
   }, [onChange])
 
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
index 8b9a494acd..e9265c0f35 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
@@ -214,10 +214,10 @@ const ChatVariableModal = ({
       try {
         let newValue = JSON.parse(content)
         if(type === ChatVarType.ArrayBoolean) {
-          newValue = newValue.map((item: string) => {
-            if (item === 'True' || item === 'true')
+          newValue = newValue.map((item: string | boolean) => {
+            if (item === 'True' || item === 'true' || item === true)
               return true
-            if (item === 'False' || item === 'false')
+            if (item === 'False' || item === 'false' || item === false)
               return false
             return undefined
           }).filter((item?: boolean) => item !== undefined)