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
new file mode 100644
index 0000000000..30618cfe8e
--- /dev/null
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/bool-value.tsx
@@ -0,0 +1,35 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import OptionCard from '../../../nodes/_base/components/option-card'
+
+type Props = {
+  value: boolean
+  onChange: (value: boolean) => void
+}
+
+const BoolValue: FC<Props> = ({
+  value,
+  onChange,
+}) => {
+  const handleChange = useCallback((newValue: boolean) => {
+    return () => {
+      onChange(newValue)
+    }
+  }, [onChange])
+  return (
+    <div className='flex w-full space-x-1'>
+      <OptionCard className='grow'
+        selected={value}
+        title='True'
+        onSelect={handleChange(true)}
+      />
+      <OptionCard className='grow'
+        selected={!value}
+        title='False'
+        onSelect={handleChange(false)}
+      />
+    </div>
+  )
+}
+export default React.memo(BoolValue)