diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index e8c689f9..42936b24 100644
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@@ -22,6 +22,10 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
+### Multiple combo boxes
+
+<FileSource src="/framed/ComboBox/MultipleComboBox" />
+
 ### Filterable
 
 <FileSource src="/framed/ComboBox/FilterableComboBox" />
diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx
index 31c7d45f..0aff004d 100644
--- a/docs/src/pages/components/Dropdown.svx
+++ b/docs/src/pages/components/Dropdown.svx
@@ -23,6 +23,10 @@ Use the `itemToString` prop to format the display of individual items.
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
+### Multiple dropdowns
+
+<FileSource src="/framed/Dropdown/MultipleDropdown" />
+
 ### Light variant
 
 <Dropdown light titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx
index 85a429c7..47a96806 100644
--- a/docs/src/pages/components/MultiSelect.svx
+++ b/docs/src/pages/components/MultiSelect.svx
@@ -34,7 +34,9 @@ To select (or bind) items, pass an array of item ids to `selectedIds`.
     {id: "2", text: "Fax"}]}" 
   />
 
+### Multiple multi-select dropdowns
 
+<FileSource src="/framed/MultiSelect/MultipleMultiSelect" />
 
 ### Format item display text
 
diff --git a/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte b/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
new file mode 100644
index 00000000..1bdd7a3b
--- /dev/null
+++ b/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { ComboBox } from "carbon-components-svelte";
+
+  const items = [
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ];
+
+  let comboBox1_selectedIndex = -1;
+  let comboBox2_selectedIndex = -1;
+
+  const formatSelected = (i) => (items[i] ? items[i].text : "N/A");
+
+  $: primary = formatSelected(comboBox1_selectedIndex);
+  $: secondary = formatSelected(comboBox2_selectedIndex);
+</script>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>
+
+<ComboBox
+  bind:selectedIndex="{comboBox1_selectedIndex}"
+  titleText="Primary contact"
+  placeholder="Select primary contact method"
+  items="{items}"
+/>
+
+<div>Primary: {primary}</div>
+
+<ComboBox
+  bind:selectedIndex="{comboBox2_selectedIndex}"
+  titleText="Secondary contact"
+  placeholder="Select secondary contact method"
+  items="{items}"
+/>
+
+<div>Secondary: {secondary}</div>
diff --git a/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte b/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
new file mode 100644
index 00000000..3f42d959
--- /dev/null
+++ b/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { Dropdown } from "carbon-components-svelte";
+
+  const items = [
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ];
+
+  let dropdown1_selectedIndex = 0;
+  let dropdown2_selectedIndex = 1;
+
+  const formatSelected = (i) => (items[i] ? items[i].text : "N/A");
+
+  $: primary = formatSelected(dropdown1_selectedIndex);
+  $: secondary = formatSelected(dropdown2_selectedIndex);
+</script>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>
+
+<Dropdown
+  titleText="Primary contact"
+  bind:selectedIndex="{dropdown1_selectedIndex}"
+  items="{items}"
+/>
+
+<div>Primary: {primary}</div>
+
+<Dropdown
+  invalid="{dropdown1_selectedIndex === dropdown2_selectedIndex}"
+  invalidText="Secondary contact method must be different from the primary contact"
+  titleText="Secondary contact"
+  bind:selectedIndex="{dropdown2_selectedIndex}"
+  items="{items}"
+/>
+
+<div>Secondary: {secondary}</div>
diff --git a/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte b/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
new file mode 100644
index 00000000..e98ce84a
--- /dev/null
+++ b/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
@@ -0,0 +1,44 @@
+<script>
+  import { MultiSelect } from "carbon-components-svelte";
+
+  const items = [
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ];
+
+  let multiselect1_selectedIds = ["0"];
+  let multiselect2_selectedIds = ["1", "2"];
+
+  const formatSelected = (i) =>
+    i.length === 0
+      ? "N/A"
+      : i.map((id) => items.find((item) => item.id === id).text).join(", ");
+
+  $: primary = formatSelected(multiselect1_selectedIds);
+  $: secondary = formatSelected(multiselect2_selectedIds);
+</script>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>
+
+<MultiSelect
+  titleText="Primary contact"
+  bind:selectedIds="{multiselect1_selectedIds}"
+  label="Select contact methods..."
+  items="{items}"
+/>
+
+<div>Primary: {primary}</div>
+
+<MultiSelect
+  titleText="Secondary contact"
+  bind:selectedIds="{multiselect2_selectedIds}"
+  label="Select contact methods..."
+  items="{items}"
+/>
+
+<div>Secondary: {secondary}</div>
diff --git a/src/ListBox/ListBox.svelte b/src/ListBox/ListBox.svelte
index 9e3298e9..558eb41e 100644
--- a/src/ListBox/ListBox.svelte
+++ b/src/ListBox/ListBox.svelte
@@ -45,7 +45,7 @@
       e.stopPropagation();
     }
   }}"
-  on:click|preventDefault|stopPropagation
+  on:click|preventDefault
 >
   <slot />
 </div>