diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index 8116ac6f..9670d341 100644
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@@ -22,6 +22,10 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
+### Filterable
+
+<FileSource src="/framed/ComboBox/FilterableComboBox" />
+
 ### Light variant
 
 <ComboBox light titleText="Contact" placeholder="Select contact method"
diff --git a/docs/src/pages/framed/ComboBox/FilterableComboBox.svelte b/docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
new file mode 100644
index 00000000..80dbf5e8
--- /dev/null
+++ b/docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { ComboBox } from "carbon-components-svelte";
+
+  function shouldFilterItem(item, value) {
+    if (!value) return true;
+    return item.text.toLowerCase().includes(value.toLowerCase());
+  }
+</script>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  shouldFilterItem="{shouldFilterItem}"
+/>