diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.test.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.test.tsx
new file mode 100644
index 00000000000..5a431614119
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.test.tsx
@@ -0,0 +1,131 @@
+/** @vitest-environment jsdom */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ConnectorConfigFields } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields'
+import {
+  type ConfigFieldValue,
+  useConnectorConfigFields,
+} from '@/app/workspace/[workspaceId]/knowledge/[id]/hooks/use-connector-config-fields'
+import { gmailConnectorMeta } from '@/connectors/gmail/meta'
+
+vi.mock('@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-selector-field', () => ({
+  ConnectorSelectorField: ({ value }: { value: ConfigFieldValue }) => (
+    <span data-testid='selector-value'>{Array.isArray(value) ? value.join(',') : value}</span>
+  ),
+}))
+
+const CONNECTOR = {
+  ...gmailConnectorMeta,
+  configFields: gmailConnectorMeta.configFields.filter(
+    (field) => field.canonicalParamId === 'label'
+  ),
+}
+
+interface HarnessProps {
+  disabled?: boolean
+}
+
+function Harness({ disabled = false }: HarnessProps) {
+  const config = useConnectorConfigFields({
+    connectorConfig: CONNECTOR,
+    initialSourceConfig: { labelSelector: ['INBOX', 'IMPORTANT'], label: ['STARRED'] },
+  })
+  return (
+    <ConnectorConfigFields
+      connectorConfig={CONNECTOR}
+      sourceConfig={config.sourceConfig}
+      credentialId={null}
+      canonicalGroups={config.canonicalGroups}
+      canonicalModes={config.canonicalModes}
+      isFieldVisible={config.isFieldVisible}
+      onFieldChange={config.handleFieldChange}
+      onToggleCanonicalMode={config.toggleCanonicalMode}
+      disabled={disabled}
+    />
+  )
+}
+
+let root: Root
+let container: HTMLDivElement
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+  vi.useRealTimers()
+})
+
+function radio(label: string): HTMLInputElement {
+  const input = container.querySelector<HTMLInputElement>(
+    `input[type="radio"][aria-label="${label}"]`
+  )
+  if (!input) throw new Error(`Missing mode option: ${label}`)
+  return input
+}
+
+describe('connector input mode switch', () => {
+  it("preserves each mode's stored values when switching to manual input and back", () => {
+    act(() => root.render(<Harness />))
+    expect(radio('Selector').checked).toBe(true)
+
+    act(() => radio('Manual input').click())
+    expect(radio('Manual input').checked).toBe(true)
+    expect(container.querySelector<HTMLInputElement>('input:not([type="radio"])')?.value).toBe(
+      'STARRED'
+    )
+
+    act(() => radio('Manual input').click())
+    expect(radio('Manual input').checked).toBe(true)
+
+    act(() => radio('Selector').click())
+    expect(radio('Selector').checked).toBe(true)
+    expect(container.querySelector('[data-testid="selector-value"]')?.textContent).toBe(
+      'INBOX,IMPORTANT'
+    )
+  })
+
+  it('keeps the switch outside the field label and ignores clicks on the title', () => {
+    act(() => root.render(<Harness />))
+    expect(container.querySelector('[role="radiogroup"]')?.closest('label')).toBeNull()
+    act(() => container.querySelector('label')?.click())
+    expect(radio('Selector').checked).toBe(true)
+  })
+
+  it('prevents mode changes while submission disables the fields', () => {
+    act(() => root.render(<Harness disabled />))
+    expect(radio('Selector').disabled).toBe(true)
+    expect(radio('Manual input').disabled).toBe(true)
+    act(() => radio('Manual input').click())
+    expect(radio('Selector').checked).toBe(true)
+  })
+
+  it('keeps focus on the switch through a keyboard mode round trip', () => {
+    act(() => root.render(<Harness />))
+    const selector = radio('Selector')
+    const manual = radio('Manual input')
+
+    act(() => {
+      manual.focus()
+      manual.click()
+    })
+    expect(radio('Manual input')).toBe(manual)
+    expect(manual.checked).toBe(true)
+    expect(document.activeElement).toBe(manual)
+
+    act(() => {
+      selector.focus()
+      selector.click()
+    })
+    expect(radio('Selector')).toBe(selector)
+    expect(selector.checked).toBe(true)
+    expect(document.activeElement).toBe(selector)
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx
index 901c72ea064..100c6b37e04 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { Button, ChipCombobox, ChipInput, ChipModalField, Tooltip } from '@sim/emcn'
-import { ArrowLeftRight, CircleInfo } from '@sim/emcn/icons'
+import { Button, ChipCombobox, ChipInput, ChipModalField, IconSwitch, Tooltip } from '@sim/emcn'
+import { CircleInfo, List, TypeText } from '@sim/emcn/icons'
 import { ConnectorSelectorField } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-selector-field'
 import type {
   ConfigFieldMap,
@@ -10,6 +10,11 @@ import type {
 import type { ConnectorConfigField, ConnectorMeta } from '@/connectors/types'
 import type { SelectorKey } from '@/hooks/selectors/types'
 
+const MODE_OPTIONS = [
+  { value: 'basic', label: 'Selector', icon: List },
+  { value: 'advanced', label: 'Manual input', icon: TypeText },
+] as const
+
 export interface ConnectorConfigFieldsProps {
   /** Registry definition whose `configFields` drive the rendered rows. */
   connectorConfig: ConnectorMeta
@@ -59,7 +64,7 @@ export function ConnectorConfigFields({
 
         return (
           <ChipModalField
-            key={field.id}
+            key={hasCanonicalPair && canonicalId ? `canonical:${canonicalId}` : field.id}
             type='custom'
             title={
               /**
@@ -68,53 +73,45 @@ export function ConnectorConfigFields({
                * Cancelling the click's default action keeps label clicks
                * inert without affecting the buttons' own handlers.
                */
-              <span
-                className='flex w-full items-center justify-between'
-                onClick={(event) => event.preventDefault()}
-              >
-                <span className='flex items-center gap-1'>
-                  <span>
-                    {field.title}
-                    {field.required && <span className='ml-0.5'>*</span>}
-                  </span>
-                  {field.description && (
-                    <Tooltip.Root>
-                      <Tooltip.Trigger asChild>
-                        <Button
-                          type='button'
-                          variant='ghost'
-                          className='flex size-[14px] cursor-help items-center justify-center p-0 text-[var(--text-muted)] transition-colors hover-hover:text-[var(--text-secondary)]'
-                          aria-label={`About ${field.title}`}
-                        >
-                          <CircleInfo className='size-[12px]' />
-                        </Button>
-                      </Tooltip.Trigger>
-                      <Tooltip.Content side='top'>{field.description}</Tooltip.Content>
-                    </Tooltip.Root>
-                  )}
+              <span className='flex items-center gap-1' onClick={(event) => event.preventDefault()}>
+                <span>
+                  {field.title}
+                  {field.required && <span className='ml-0.5'>*</span>}
                 </span>
-                {hasCanonicalPair && canonicalId && (
+                {field.description && (
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
                       <Button
                         type='button'
                         variant='ghost'
-                        className='flex size-[18px] items-center justify-center rounded-[3px] p-0 text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-3)] hover-hover:text-[var(--text-secondary)]'
-                        onClick={() => onToggleCanonicalMode(canonicalId)}
+                        className='flex size-[14px] cursor-help items-center justify-center p-0 text-[var(--text-muted)] transition-colors hover-hover:text-[var(--text-secondary)]'
+                        aria-label={`About ${field.title}`}
                       >
-                        <ArrowLeftRight className='size-[12px]' />
+                        <CircleInfo className='size-[12px]' />
                       </Button>
                     </Tooltip.Trigger>
-                    <Tooltip.Content side='top'>
-                      {field.mode === 'basic' ? 'Switch to manual input' : 'Switch to selector'}
-                    </Tooltip.Content>
+                    <Tooltip.Content side='top'>{field.description}</Tooltip.Content>
                   </Tooltip.Root>
                 )}
               </span>
             }
+            titleAdornment={
+              hasCanonicalPair && canonicalId ? (
+                <IconSwitch
+                  options={MODE_OPTIONS}
+                  value={field.mode === 'advanced' ? 'advanced' : 'basic'}
+                  onValueChange={() => onToggleCanonicalMode(canonicalId)}
+                  disabled={disabled}
+                  showTooltips
+                  aria-label={`${field.title} input mode`}
+                  className='-my-1'
+                />
+              ) : undefined
+            }
           >
             {field.type === 'selector' && field.selectorKey ? (
               <ConnectorSelectorField
+                key={field.id}
                 field={field as ConnectorConfigField & { selectorKey: SelectorKey }}
                 value={sourceConfig[field.id] ?? (field.multi ? [] : '')}
                 onChange={(value: ConfigFieldValue) => onFieldChange(field.id, value)}
@@ -126,6 +123,7 @@ export function ConnectorConfigFields({
               />
             ) : field.type === 'dropdown' && field.options ? (
               <ChipCombobox
+                key={field.id}
                 options={field.options.map((opt) => ({
                   label: opt.label,
                   value: opt.id,
@@ -140,6 +138,7 @@ export function ConnectorConfigFields({
               />
             ) : (
               <ChipInput
+                key={field.id}
                 value={
                   Array.isArray(sourceConfig[field.id])
                     ? (sourceConfig[field.id] as string[]).join(', ')
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/canonical-mode-toggle.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/canonical-mode-toggle.tsx
new file mode 100644
index 00000000000..f5196e9e284
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/canonical-mode-toggle.tsx
@@ -0,0 +1,29 @@
+import { IconSwitch } from '@sim/emcn'
+import { List } from '@sim/emcn/icons'
+import { VariableIcon } from '@/components/icons'
+import type { CanonicalMode } from '@/lib/workflows/subblocks/visibility'
+
+interface CanonicalModeToggleProps {
+  mode: CanonicalMode
+  disabled?: boolean
+  onToggle?: () => void
+}
+
+const MODE_OPTIONS = [
+  { value: 'basic', label: 'Selector', icon: List },
+  { value: 'advanced', label: 'Variable', icon: VariableIcon },
+] as const
+
+export function CanonicalModeToggle({ mode, disabled, onToggle }: CanonicalModeToggleProps) {
+  return (
+    <IconSwitch
+      options={MODE_OPTIONS}
+      value={mode}
+      onValueChange={() => onToggle?.()}
+      disabled={disabled}
+      showTooltips
+      aria-label='Input mode'
+      className='-my-1'
+    />
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.test.tsx
index 0c62d5155f4..8407c592dd5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.test.tsx
@@ -41,7 +41,17 @@ describe('SubBlockFieldHeader', () => {
 
     expect(container?.textContent).toContain('Response format')
     expect(container?.querySelector('[aria-label="Required"]')).not.toBeNull()
-    expect(container?.querySelector('[aria-label="Switch to manual ID"]')).not.toBeNull()
+    expect(
+      container?.querySelector<HTMLInputElement>('input[type="radio"][aria-label="Selector"]')
+        ?.checked
+    ).toBe(true)
+
+    const variableOption = container?.querySelector<HTMLInputElement>(
+      'input[type="radio"][aria-label="Variable"]'
+    )
+    if (!variableOption) throw new Error('Canonical mode switch did not render')
+    act(() => variableOption.click())
+    expect(onToggle).toHaveBeenCalledOnce()
 
     const copyButton = container?.querySelector<HTMLButtonElement>('[aria-label="Copy value"]')
     if (!copyButton) throw new Error('Copy action did not render')
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.tsx
index 1515a1a1282..33ac8424bd4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.tsx
@@ -1,13 +1,7 @@
 import type { FocusEvent, ReactNode, RefObject } from 'react'
 import { Button, ChipInput, 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 { CanonicalModeToggle } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/canonical-mode-toggle'
 
 interface FieldHeaderWandAction {
   isSearchActive: boolean
@@ -62,9 +56,6 @@ export function SubBlockFieldHeader({
   copyAction,
   externalLinkAction,
 }: SubBlockFieldHeaderProps) {
-  const canonicalTooltip =
-    canonicalAction?.mode === 'advanced' ? 'Switch to selector' : 'Switch to manual ID'
-
   const handleWandBlur = (event: FocusEvent<HTMLInputElement>) => {
     if (event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button')) return
     wandAction?.onSearchBlur()
@@ -172,27 +163,11 @@ export function SubBlockFieldHeader({
           </Tooltip.Root>
         ) : null}
         {canonicalAction ? (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                type='button'
-                variant='quiet'
-                size='icon'
-                onClick={canonicalAction.onToggle}
-                disabled={canonicalAction.disabled}
-                aria-label={canonicalTooltip}
-              >
-                <ArrowLeftRight
-                  className={
-                    canonicalAction.mode === 'advanced'
-                      ? 'size-[14px] text-[var(--text-primary)]'
-                      : 'size-[14px]'
-                  }
-                />
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>{canonicalTooltip}</Tooltip.Content>
-          </Tooltip.Root>
+          <CanonicalModeToggle
+            mode={canonicalAction.mode}
+            onToggle={canonicalAction.onToggle}
+            disabled={canonicalAction.disabled}
+          />
         ) : null}
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts
index cdda2da961d..141235e438c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts
@@ -1,4 +1,5 @@
 export { BooleanControl } from './boolean-control'
+export { CanonicalModeToggle } from './canonical-mode-toggle'
 export { CheckboxList } from './checkbox-list'
 export { Code } from './code'
 export { ComboBox } from './combobox'
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 e43fb61aa7b..78e8c7df25c 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
@@ -6,17 +6,16 @@ import {
   Code,
   type ComboboxOption,
   calculateGutterWidth,
-  cn,
   Expandable,
   ExpandableContent,
   getCodeEditorProps,
   handleKeyboardActivation,
   highlight,
+  IconSwitch,
   Label,
   languages,
-  Tooltip,
 } from '@sim/emcn'
-import { ArrowLeftRight, Plus, Trash } from '@sim/emcn/icons'
+import { Plus, Trash, TypeJson, Upload } from '@sim/emcn/icons'
 import Editor from 'react-simple-code-editor'
 import {
   createDefaultInputFormatField,
@@ -84,6 +83,11 @@ const BOOLEAN_OPTIONS: ComboboxOption[] = [
   { label: 'false', value: 'false' },
 ]
 
+const FILE_MODE_OPTIONS = [
+  { value: 'upload', label: 'File uploader', icon: Upload },
+  { value: 'json', label: 'JSON', icon: TypeJson },
+] as const
+
 /**
  * Validates and sanitizes field names by removing control characters and quotes
  */
@@ -158,42 +162,24 @@ export function FieldFormat({
   }
 
   /**
-   * Renders the ⇄ toggle that switches a file field between the uploader and the
-   * raw JSON editor. Matches the canonical sub-block mode toggle. Hidden when the
-   * value can't be safely represented by the uploader.
+   * Switches a file field between the uploader and raw JSON editor, only when
+   * the value can be safely represented by the uploader.
    */
   const renderFileModeToggle = (field: Field) => {
     const { mode, canUseUploader } = getFileFieldMode(field)
     if (!canUseUploader) return null
-    const label = mode === 'upload' ? 'Switch to JSON' : 'Switch to file uploader'
     return (
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Button
-            type='button'
-            variant='quiet'
-            size='icon'
-            onClick={() =>
-              setFileFieldModes((prev) => ({
-                ...prev,
-                [field.id]: mode === 'upload' ? 'json' : 'upload',
-              }))
-            }
-            disabled={isReadOnly}
-            aria-label={label}
-          >
-            <ArrowLeftRight
-              className={cn(
-                'size-[14px]',
-                mode === 'json' ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'
-              )}
-            />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Content side='top'>
-          <p>{label}</p>
-        </Tooltip.Content>
-      </Tooltip.Root>
+      <IconSwitch
+        options={FILE_MODE_OPTIONS}
+        value={mode}
+        onValueChange={(nextMode) =>
+          setFileFieldModes((prev) => ({ ...prev, [field.id]: nextMode }))
+        }
+        disabled={isReadOnly}
+        showTooltips
+        aria-label='File input mode'
+        className='-my-1'
+      />
     )
   }
 
@@ -723,7 +709,7 @@ export function FieldFormat({
                 {showValue && (
                   <div className='flex flex-col gap-1.5'>
                     {isFileFieldType(field.type) ? (
-                      <div className='flex items-center justify-between'>
+                      <div className='flex min-h-5 items-center justify-between'>
                         {renderFieldLabel('Value')}
                         {renderFileModeToggle(field)}
                       </div>
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 5be9308c629..4cc4ad8cf6a 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
@@ -6,12 +6,13 @@ import {
   CollapsibleCard,
   type ComboboxOption,
   cn,
+  IconSwitch,
   Label,
-  Tooltip,
 } from '@sim/emcn'
-import { ArrowLeftRight, Plus, Trash } from '@sim/emcn/icons'
+import { List, Plus, Trash } from '@sim/emcn/icons'
 import { generateId } from '@sim/utils/id'
 import { useParams } from 'next/navigation'
+import { VariableIcon } from '@/components/icons'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import {
   ReferenceTextarea,
@@ -64,6 +65,11 @@ const BOOLEAN_OPTIONS: ComboboxOption[] = [
   { label: 'false', value: 'false' },
 ]
 
+const BOOLEAN_MODE_OPTIONS = [
+  { value: 'selector', label: 'Selector', icon: List },
+  { value: 'manual', label: 'Variable', icon: VariableIcon },
+] as const
+
 /**
  * Values representable by the boolean selector; anything else (e.g. a block
  * reference) requires the manual input.
@@ -459,40 +465,23 @@ export function VariablesInput({
                 </div>
 
                 <div className='flex flex-col gap-1.5'>
-                  <div className='flex items-center justify-between'>
+                  <div className='flex min-h-5 items-center justify-between'>
                     <Label className='text-small'>Value</Label>
                     {assignment.type === 'boolean' && (
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <Button
-                            type='button'
-                            variant='quiet'
-                            size='icon'
-                            onClick={() =>
-                              setManualBooleanModes((prev) => ({
-                                ...prev,
-                                [assignment.id]: !isManualBoolean,
-                              }))
-                            }
-                            disabled={isReadOnly}
-                            aria-label={
-                              isManualBoolean ? 'Switch to selector' : 'Switch to manual value'
-                            }
-                          >
-                            <ArrowLeftRight
-                              className={cn(
-                                'size-[14px]',
-                                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>
+                      <IconSwitch
+                        options={BOOLEAN_MODE_OPTIONS}
+                        value={isManualBoolean ? 'manual' : 'selector'}
+                        onValueChange={(mode) =>
+                          setManualBooleanModes((prev) => ({
+                            ...prev,
+                            [assignment.id]: mode === 'manual',
+                          }))
+                        }
+                        disabled={isReadOnly}
+                        showTooltips
+                        aria-label='Boolean input mode'
+                        className='-my-1'
+                      />
                     )}
                   </div>
                   {assignment.type === 'boolean' && !isManualBoolean ? (
diff --git a/packages/emcn/src/components/chip-modal/chip-modal.tsx b/packages/emcn/src/components/chip-modal/chip-modal.tsx
index 61e239d3fc5..af27d3795a1 100644
--- a/packages/emcn/src/components/chip-modal/chip-modal.tsx
+++ b/packages/emcn/src/components/chip-modal/chip-modal.tsx
@@ -387,6 +387,8 @@ export type ChipModalDropdownOption = ChipDropdownOption
 interface ChipModalFieldBaseProps {
   /** Field title rendered above the control. Replaces the legacy `label` slot. */
   title: React.ReactNode
+  /** Trailing title-row control, rendered outside the label so it stays independently interactive. */
+  titleAdornment?: React.ReactNode
   /**
    * Renders a `*` marker after the title and sets `aria-required` on the
    * underlying control.
@@ -622,24 +624,34 @@ function ChipModalField(props: ChipModalFieldProps) {
   const submitRef = React.useContext(ChipModalSubmitContext)
   const errorId = `${id}-error`
   const hintId = `${id}-hint`
-  const { title, required, error, hint, flush = false, className } = props
+  const { title, titleAdornment, required, error, hint, flush = false, className } = props
   const associatesLabel =
     props.type === 'input' ||
     props.type === 'email' ||
     props.type === 'textarea' ||
     props.type === 'copy' ||
     props.type === 'emails'
+  const label = (
+    <Label htmlFor={associatesLabel ? id : undefined} className='pl-0.5 text-[var(--text-muted)]'>
+      {title}
+      {required && (
+        <span aria-hidden className='ml-0.5 text-[var(--text-error)]'>
+          *
+        </span>
+      )}
+    </Label>
+  )
 
   return (
     <div className={cn('flex flex-col gap-[9px]', flush ? 'px-0' : 'px-2', className)}>
-      <Label htmlFor={associatesLabel ? id : undefined} className='pl-0.5 text-[var(--text-muted)]'>
-        {title}
-        {required && (
-          <span aria-hidden className='ml-0.5 text-[var(--text-error)]'>
-            *
-          </span>
-        )}
-      </Label>
+      {titleAdornment ? (
+        <div className='flex min-h-[18px] items-center justify-between gap-1.5'>
+          {label}
+          {titleAdornment}
+        </div>
+      ) : (
+        label
+      )}
       {renderChipModalControl(props, id, errorId, hintId, submitRef)}
       {error && props.type !== 'emails' ? (
         <p id={errorId} role='alert' className={CHIP_MODAL_FIELD_ERROR_CLASS}>
diff --git a/packages/emcn/src/components/icon-switch/icon-switch.test.tsx b/packages/emcn/src/components/icon-switch/icon-switch.test.tsx
new file mode 100644
index 00000000000..569ec48d82a
--- /dev/null
+++ b/packages/emcn/src/components/icon-switch/icon-switch.test.tsx
@@ -0,0 +1,138 @@
+/** @vitest-environment jsdom */
+import { act, useState } from 'react'
+import { ChipModalField, IconSwitch } from '@sim/emcn'
+import { Code, List } from '@sim/emcn/icons'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const OPTIONS = [
+  { value: 'selector', label: 'Selector', icon: List },
+  { value: 'variable', label: 'Variable', icon: Code },
+] as const
+
+interface HarnessProps {
+  disabled?: boolean
+  showTooltips?: boolean
+  inModalField?: boolean
+  onValueChange: (value: string) => void
+}
+
+function Harness({ disabled, showTooltips, inModalField, onValueChange }: HarnessProps) {
+  const [value, setValue] = useState('selector')
+  const toggle = (
+    <IconSwitch
+      options={OPTIONS}
+      value={value}
+      onValueChange={(nextValue) => {
+        setValue(nextValue)
+        onValueChange(nextValue)
+      }}
+      disabled={disabled}
+      showTooltips={showTooltips}
+      aria-label='Input mode'
+    />
+  )
+  return inModalField ? (
+    <ChipModalField type='custom' title='Folder' titleAdornment={toggle}>
+      <input aria-label='Folder ID' />
+    </ChipModalField>
+  ) : (
+    toggle
+  )
+}
+
+let root: Root | null = null
+let container: HTMLDivElement
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root?.unmount())
+  container.remove()
+  root = null
+  vi.useRealTimers()
+})
+
+function mount(props: HarnessProps) {
+  act(() => root?.render(<Harness {...props} />))
+  return {
+    inputs: [...container.querySelectorAll<HTMLInputElement>('input[type="radio"]')],
+    labels: [...container.querySelectorAll<HTMLLabelElement>('[role="radiogroup"] label')],
+  }
+}
+
+describe('IconSwitch', () => {
+  it('changes mode beside a modal field title without making title clicks change mode', () => {
+    const onValueChange = vi.fn()
+    const { inputs, labels } = mount({ inModalField: true, onValueChange })
+    const title = [...container.querySelectorAll('label')].find(
+      (label) => label.textContent === 'Folder'
+    )
+    expect(title).toBeDefined()
+    expect(container.querySelector('[role="radiogroup"]')?.closest('label')).toBeNull()
+
+    act(() => labels[1].click())
+    expect(inputs.map((input) => input.checked)).toEqual([false, true])
+    expect(onValueChange).toHaveBeenLastCalledWith('variable')
+
+    act(() => title?.click())
+    expect(onValueChange).toHaveBeenCalledTimes(1)
+    expect(inputs.map((input) => input.checked)).toEqual([false, true])
+  })
+
+  it('selects either mode without toggling an already selected choice', () => {
+    const onValueChange = vi.fn()
+    const { inputs, labels } = mount({ onValueChange })
+
+    act(() => labels[1].click())
+    expect(inputs.map((input) => input.checked)).toEqual([false, true])
+    expect(onValueChange).toHaveBeenLastCalledWith('variable')
+
+    act(() => labels[1].click())
+    expect(onValueChange).toHaveBeenCalledTimes(1)
+
+    act(() => labels[0].click())
+    expect(inputs.map((input) => input.checked)).toEqual([true, false])
+    expect(onValueChange).toHaveBeenLastCalledWith('selector')
+  })
+
+  it('prevents selection changes while disabled', () => {
+    const onValueChange = vi.fn()
+    const { inputs, labels } = mount({ disabled: true, onValueChange })
+
+    act(() => labels[1].click())
+    expect(onValueChange).not.toHaveBeenCalled()
+    expect(inputs.every((input) => input.disabled)).toBe(true)
+    expect(inputs.map((input) => input.checked)).toEqual([true, false])
+  })
+
+  it('shows each option label in its hover tooltip', () => {
+    const { inputs } = mount({ showTooltips: true, onValueChange: vi.fn() })
+
+    for (const [index, option] of OPTIONS.entries()) {
+      act(() => {
+        inputs[index].dispatchEvent(
+          new MouseEvent('pointerover', { bubbles: true, clientX: 200, clientY: 200 })
+        )
+      })
+      expect(document.querySelector('[role="tooltip"]')?.textContent).toBe(option.label)
+      act(() => inputs[index].dispatchEvent(new MouseEvent('pointerout', { bubbles: true })))
+    }
+  })
+
+  it('shows a tooltip on keyboard focus without changing selection', () => {
+    const onValueChange = vi.fn()
+    const { inputs } = mount({ showTooltips: true, onValueChange })
+
+    act(() => inputs[1].focus())
+    expect(document.querySelector('[role="tooltip"]')?.textContent).toBe('Variable')
+    expect(onValueChange).not.toHaveBeenCalled()
+    expect(inputs.map((input) => input.checked)).toEqual([true, false])
+  })
+})
diff --git a/packages/emcn/src/components/icon-switch/icon-switch.tsx b/packages/emcn/src/components/icon-switch/icon-switch.tsx
new file mode 100644
index 00000000000..0baa0d96b0f
--- /dev/null
+++ b/packages/emcn/src/components/icon-switch/icon-switch.tsx
@@ -0,0 +1,97 @@
+'use client'
+
+import { type ComponentType, useId } from 'react'
+import { cn } from '../../lib/cn'
+import { Tooltip } from '../tooltip/tooltip'
+
+export interface IconSwitchOption<T extends string = string> {
+  value: T
+  label: string
+  icon: ComponentType<{ className?: string }>
+}
+
+export interface IconSwitchProps<T extends string = string> {
+  options: readonly [IconSwitchOption<T>, IconSwitchOption<T>]
+  value: T
+  onValueChange: (value: T) => void
+  disabled?: boolean
+  showTooltips?: boolean
+  'aria-label': string
+  className?: string
+}
+
+/**
+ * Two square icon choices inside a compact frame. Native radios provide mutually
+ * exclusive selection and keyboard navigation; optional tooltips use each label.
+ *
+ * @example
+ * <IconSwitch options={modes} value={mode} onValueChange={setMode} aria-label="Input mode" />
+ */
+export function IconSwitch<T extends string>({
+  options,
+  value,
+  onValueChange,
+  disabled = false,
+  showTooltips = false,
+  'aria-label': ariaLabel,
+  className,
+}: IconSwitchProps<T>) {
+  const groupName = useId()
+
+  return (
+    <div
+      role='radiogroup'
+      aria-label={ariaLabel}
+      className={cn(
+        'inline-flex w-fit shrink-0 items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] p-[2px]',
+        disabled && 'opacity-50',
+        className
+      )}
+    >
+      {options.map((option) => {
+        const Icon = option.icon
+        const selected = option.value === value
+        const optionId = `${groupName}-${option.value}`
+        const input = (
+          <input
+            id={optionId}
+            type='radio'
+            name={groupName}
+            value={option.value}
+            checked={selected}
+            onChange={() => onValueChange(option.value)}
+            disabled={disabled}
+            aria-label={option.label}
+            className='peer m-0 size-[16px] cursor-pointer appearance-none rounded-[calc(theme(borderRadius.lg)-2px-var(--border-width,1px))] bg-transparent transition-colors checked:bg-[var(--surface-active)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-icon)] disabled:cursor-not-allowed'
+          />
+        )
+
+        return (
+          <label
+            key={option.value}
+            htmlFor={optionId}
+            className={cn('relative flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
+          >
+            {showTooltips ? (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>{input}</Tooltip.Trigger>
+                <Tooltip.Content side='top'>{option.label}</Tooltip.Content>
+              </Tooltip.Root>
+            ) : (
+              input
+            )}
+            <Icon
+              aria-hidden='true'
+              className={cn(
+                '-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute top-1/2 left-1/2 size-[12px] transition-colors',
+                selected
+                  ? 'text-[var(--text-primary)]'
+                  : 'text-[var(--text-muted)] peer-hover:text-[var(--text-secondary)]'
+              )}
+            />
+          </label>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index 240dc803be5..c914ace6ad9 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -128,6 +128,7 @@ export {
 } from './dropdown-menu/dropdown-menu'
 export { Expandable, ExpandableContent } from './expandable/expandable'
 export { DashedDividerLine, FieldDivider } from './field-divider/field-divider'
+export { IconSwitch, type IconSwitchOption, type IconSwitchProps } from './icon-switch/icon-switch'
 export { Info } from './info/info'
 export {
   InfoCard,