diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-mode-toggle/field-mode-toggle.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-mode-toggle/field-mode-toggle.tsx
new file mode 100644
index 00000000000..e7916f529d2
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-mode-toggle/field-mode-toggle.tsx
@@ -0,0 +1,37 @@
+import type { ButtonHTMLAttributes } from 'react'
+import { cn, Tooltip } from '@sim/emcn'
+import { ArrowLeftRight } from '@sim/emcn/icons'
+
+interface FieldModeToggleProps {
+  label: string
+  active: boolean
+  disabled?: boolean
+  onClick: ButtonHTMLAttributes<HTMLButtonElement>['onClick']
+}
+
+/** Shared field-mode affordance; the caller owns the mode and its stored values. */
+export function FieldModeToggle({ label, active, disabled, onClick }: FieldModeToggleProps) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <button
+          type='button'
+          className='flex size-[12px] shrink-0 items-center justify-center bg-transparent p-0 focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)] disabled:cursor-not-allowed disabled:opacity-50'
+          onClick={onClick}
+          disabled={disabled}
+          aria-label={label}
+        >
+          <ArrowLeftRight
+            className={cn(
+              'size-[12px]! transition-colors',
+              active ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'
+            )}
+          />
+        </button>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='top'>
+        <p>{label}</p>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index 4626149cba9..a949d97a61b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -14,15 +14,15 @@ import {
   Label,
   languages,
   OverflowText,
-  Tooltip,
 } from '@sim/emcn'
-import { ArrowLeftRight, Plus, Trash } from '@sim/emcn/icons'
+import { Plus, Trash } from '@sim/emcn/icons'
 import Editor from 'react-simple-code-editor'
 import {
   createDefaultInputFormatField,
   isFileFieldType,
   parseInputFormatFiles,
 } from '@/lib/workflows/input-format'
+import { FieldModeToggle } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-mode-toggle/field-mode-toggle'
 import { FileUpload } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import {
@@ -166,32 +166,17 @@ export function FieldFormat({
     if (!canUseUploader) return null
     const label = mode === 'upload' ? 'Switch to JSON' : 'Switch to file uploader'
     return (
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <button
-            type='button'
-            className='flex size-[12px] shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
-            onClick={() =>
-              setFileFieldModes((prev) => ({
-                ...prev,
-                [field.id]: mode === 'upload' ? 'json' : 'upload',
-              }))
-            }
-            disabled={isReadOnly}
-            aria-label={label}
-          >
-            <ArrowLeftRight
-              className={cn(
-                'h-[12px]! w-[12px]!',
-                mode === 'json' ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'
-              )}
-            />
-          </button>
-        </Tooltip.Trigger>
-        <Tooltip.Content side='top'>
-          <p>{label}</p>
-        </Tooltip.Content>
-      </Tooltip.Root>
+      <FieldModeToggle
+        active={mode === 'json'}
+        label={label}
+        disabled={isReadOnly}
+        onClick={() =>
+          setFileFieldModes((prev) => ({
+            ...prev,
+            [field.id]: mode === 'upload' ? 'json' : 'upload',
+          }))
+        }
+      />
     )
   }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/usage-control.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/usage-control.tsx
index e79ab62abcd..684602b559c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/usage-control.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/usage-control.tsx
@@ -1,7 +1,7 @@
-import { Combobox, cn, Label, Tooltip } from '@sim/emcn'
-import { ArrowLeftRight } from '@sim/emcn/icons'
+import { Combobox, Label } from '@sim/emcn'
 import type { CanonicalMode } from '@/lib/workflows/subblocks/visibility'
 import type { StoredTool } from '@/lib/workflows/tool-input/types'
+import { FieldModeToggle } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-mode-toggle/field-mode-toggle'
 import { ShortInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input'
 import type { SubBlockConfig } from '@/blocks/types'
 
@@ -63,29 +63,12 @@ export function ToolUsageControl({
       <div className='flex items-center justify-between gap-1.5 pl-0.5'>
         <Label className='flex items-baseline gap-1.5 whitespace-nowrap'>Permission Mode</Label>
         <div className='flex min-w-0 flex-1 items-center justify-end gap-1.5'>
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <button
-                type='button'
-                className='flex size-[12px] shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
-                onClick={onModeToggle}
-                disabled={disabled}
-                aria-label={toggleLabel}
-              >
-                <ArrowLeftRight
-                  className={cn(
-                    'size-[12px]!',
-                    mode === 'advanced'
-                      ? 'text-[var(--text-primary)]'
-                      : 'text-[var(--text-secondary)]'
-                  )}
-                />
-              </button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              <p>{toggleLabel}</p>
-            </Tooltip.Content>
-          </Tooltip.Root>
+          <FieldModeToggle
+            active={mode === 'advanced'}
+            label={toggleLabel}
+            onClick={onModeToggle}
+            disabled={disabled}
+          />
         </div>
       </div>
       {mode === 'advanced' ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index 46f41a74b3e..0d129662c0e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -10,11 +10,11 @@ import {
   Label,
   OverflowText,
   Textarea,
-  Tooltip,
 } from '@sim/emcn'
-import { ArrowLeftRight, Plus, Trash } from '@sim/emcn/icons'
+import { Plus, Trash } from '@sim/emcn/icons'
 import { generateId } from '@sim/utils/id'
 import { useParams } from 'next/navigation'
+import { FieldModeToggle } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-mode-toggle/field-mode-toggle'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import {
   checkTagTrigger,
@@ -472,36 +472,17 @@ export function VariablesInput({
                   <div className='flex items-center justify-between'>
                     <Label className='text-small'>Value</Label>
                     {assignment.type === 'boolean' && (
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <button
-                            type='button'
-                            className='flex size-[12px] shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
-                            onClick={() =>
-                              setManualBooleanModes((prev) => ({
-                                ...prev,
-                                [assignment.id]: !isManualBoolean,
-                              }))
-                            }
-                            disabled={isReadOnly}
-                            aria-label={
-                              isManualBoolean ? 'Switch to selector' : 'Switch to manual value'
-                            }
-                          >
-                            <ArrowLeftRight
-                              className={cn(
-                                'h-[12px]! w-[12px]!',
-                                isManualBoolean
-                                  ? 'text-[var(--text-primary)]'
-                                  : 'text-[var(--text-secondary)]'
-                              )}
-                            />
-                          </button>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content side='top'>
-                          <p>{isManualBoolean ? 'Switch to selector' : 'Switch to manual value'}</p>
-                        </Tooltip.Content>
-                      </Tooltip.Root>
+                      <FieldModeToggle
+                        active={isManualBoolean}
+                        label={isManualBoolean ? 'Switch to selector' : 'Switch to manual value'}
+                        disabled={isReadOnly}
+                        onClick={() =>
+                          setManualBooleanModes((prev) => ({
+                            ...prev,
+                            [assignment.id]: !isManualBoolean,
+                          }))
+                        }
+                      />
                     )}
                   </div>
                   {assignment.type === 'boolean' && !isManualBoolean ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index 4795928d1c6..88bb88e2ace 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -1,13 +1,6 @@
 import { type JSX, type MouseEvent, memo, useCallback, useMemo, useRef, useState } from 'react'
 import { Button, cn, Input, Label, Tooltip } from '@sim/emcn'
-import {
-  ArrowLeftRight,
-  ArrowUp,
-  Check,
-  Clipboard,
-  SquareArrowUpRight,
-  TriangleAlert,
-} from '@sim/emcn/icons'
+import { ArrowUp, Check, Clipboard, SquareArrowUpRight, TriangleAlert } from '@sim/emcn/icons'
 import { isEqual } from 'es-toolkit'
 import { useParams } from 'next/navigation'
 import type { FilterRule, SortRule } from '@/lib/table/query-builder/constants'
@@ -54,6 +47,7 @@ import {
   WorkflowSelectorInput,
   WorkspaceFolderSelector,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components'
+import { FieldModeToggle } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-mode-toggle/field-mode-toggle'
 import { MODAL_REGISTRY } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/modal-registry'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
 import type { SubBlockConfig } from '@/blocks/types'
@@ -377,37 +371,14 @@ const renderLabel = (
           </Tooltip.Root>
         )}
         {showCanonicalToggle && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <button
-                type='button'
-                className='flex size-[12px] shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
-                onClick={canonicalToggle?.onToggle}
-                disabled={canonicalToggleDisabledResolved}
-                aria-label={
-                  canonicalToggle?.mode === 'advanced'
-                    ? 'Switch to selector'
-                    : 'Switch to manual ID'
-                }
-              >
-                <ArrowLeftRight
-                  className={cn(
-                    'h-[12px]! w-[12px]!',
-                    canonicalToggle?.mode === 'advanced'
-                      ? 'text-[var(--text-primary)]'
-                      : 'text-[var(--text-secondary)]'
-                  )}
-                />
-              </button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              <p>
-                {canonicalToggle?.mode === 'advanced'
-                  ? 'Switch to selector'
-                  : 'Switch to manual ID'}
-              </p>
-            </Tooltip.Content>
-          </Tooltip.Root>
+          <FieldModeToggle
+            active={canonicalToggle?.mode === 'advanced'}
+            label={
+              canonicalToggle?.mode === 'advanced' ? 'Switch to selector' : 'Switch to manual ID'
+            }
+            disabled={canonicalToggleDisabledResolved}
+            onClick={canonicalToggle?.onToggle}
+          />
         )}
       </div>
     </div>