-
+ {titleAdornment ? (
+
+ {label}
+ {titleAdornment}
+
+ ) : (
+ label
+ )}
{renderChipModalControl(props, id, errorId, hintId)}
{error && props.type !== 'emails' ? (
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 = (
+ {
+ setValue(nextValue)
+ onValueChange(nextValue)
+ }}
+ disabled={disabled}
+ showTooltips={showTooltips}
+ aria-label='Input mode'
+ />
+ )
+ return inModalField ? (
+
+
+
+ ) : (
+ 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())
+ return {
+ inputs: [...container.querySelectorAll('input[type="radio"]')],
+ labels: [...container.querySelectorAll('[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..8b16fc4068f
--- /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 {
+ value: T
+ label: string
+ icon: ComponentType<{ className?: string }>
+}
+
+export interface IconSwitchProps {
+ options: readonly [IconSwitchOption, IconSwitchOption]
+ 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
+ *
+ */
+export function IconSwitch({
+ options,
+ value,
+ onValueChange,
+ disabled = false,
+ showTooltips = false,
+ 'aria-label': ariaLabel,
+ className,
+}: IconSwitchProps) {
+ const groupName = useId()
+
+ return (
+
+ {options.map((option) => {
+ const Icon = option.icon
+ const selected = option.value === value
+ const optionId = `${groupName}-${option.value}`
+ const input = (
+ onValueChange(option.value)}
+ disabled={disabled}
+ aria-label={option.label}
+ className='peer m-0 size-[16px] cursor-pointer appearance-none rounded-[calc(theme(borderRadius.sm)-1px-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 (
+
+ )
+ })}
+
+ )
+}
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index 039102ac8c2..5455a469bf5 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -132,6 +132,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,