diff --git a/documentation/docs/03-template-syntax/14-in-and-out.md b/documentation/docs/03-template-syntax/14-in-and-out.md
index feb5aa84c587..865398b46e21 100644
--- a/documentation/docs/03-template-syntax/14-in-and-out.md
+++ b/documentation/docs/03-template-syntax/14-in-and-out.md
@@ -5,6 +5,17 @@ title: in: and out:
 The `in:` and `out:` directives are identical to [`transition:`](transition), except that the resulting transitions are not bidirectional — an `in` transition will continue to 'play' alongside the `out` transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
 
 ```svelte
+<script>
+  import { fade, fly } from 'svelte/transition';
+  
+  let visible = $state(false);
+</script>
+
+<label>
+  <input type="checkbox" bind:checked={visible}>
+  visible
+</label>
+
 {#if visible}
 	<div in:fly out:fade>flies in, fades out</div>
 {/if}