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 739d25279..ebd755eae 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
@@ -322,9 +322,11 @@ const ChatVariableModal = ({
           </div>
           <div className='flex'>
             {type === ChatVarType.String && (
-              <Input
-                placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''}
+              // Input will remove \n\r, so use Textarea just like description area
+              <textarea
+                className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
                 value={value}
+                placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''}
                 onChange={e => setValue(e.target.value)}
               />
             )}
diff --git a/web/app/components/workflow/panel/env-panel/variable-modal.tsx b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
index 7692053c6..41a735e9a 100644
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -131,12 +131,20 @@ const VariableModal = ({
         <div className=''>
           <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.value')}</div>
           <div className='flex'>
-            <Input
-              placeholder={t('workflow.env.modal.valuePlaceholder') || ''}
-              value={value}
-              onChange={e => setValue(e.target.value)}
-              type={type !== 'number' ? 'text' : 'number'}
-            />
+            {
+              type !== 'number' ? <textarea
+                className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
+                value={value}
+                placeholder={t('workflow.env.modal.valuePlaceholder') || ''}
+                onChange={e => setValue(e.target.value)}
+              />
+                : <Input
+                  placeholder={t('workflow.env.modal.valuePlaceholder') || ''}
+                  value={value}
+                  onChange={e => setValue(e.target.value)}
+                  type="number"
+                />
+            }
           </div>
         </div>
       </div>