diff --git a/docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte b/docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte
index d0f4ed03..9e04d92c 100644
--- a/docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte
+++ b/docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte
@@ -62,7 +62,7 @@
 </div>
 
 <SelectableTileGroup
-  selectedValues="{selectedValues3}"
+  bind:selectedValues="{selectedValues3}"
   legend="Select the options you require"
 >
   {#each selectedValues3_control as item}
@@ -85,3 +85,32 @@
     Reset selectedValues3
   </Button>
 </div>
+
+<h2>#key fix</h2>
+
+<SelectableTileGroup
+  bind:selectedValues="{selectedValues3}"
+  legend="Select the options you require"
+>
+  {#key selectedValues3_control}
+    {#each selectedValues3_control as item}
+      <SelectableTile value="{item.value}" selected="{item.selected}">
+        {item.value}
+      </SelectableTile>
+    {/each}
+  {/key}
+</SelectableTileGroup>
+
+<div>
+  {selectedValues3.join(', ')}
+
+  <Button
+    on:click="{() => {
+      selectedValues3_control = selectedValues3_control.map((item) => {
+        return { ...item, selected: false };
+      });
+    }}"
+  >
+    Reset selectedValues3
+  </Button>
+</div>