From bf4d62a23f680d9472542a6519fd71227ee18468 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 3 Jun 2026 17:03:57 +0200
Subject: [PATCH] docs(playground) : exemple reserveMessageSpace sur
 SelectCheckbox

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../pages/composant/select/selectCheckbox.vue | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/.playground/pages/composant/select/selectCheckbox.vue b/.playground/pages/composant/select/selectCheckbox.vue
index 20b0a6c..2b5760a 100644
--- a/.playground/pages/composant/select/selectCheckbox.vue
+++ b/.playground/pages/composant/select/selectCheckbox.vue
@@ -167,6 +167,37 @@
         empty-option-label="Aucune selection"
       />
     </div>
+
+    <div class="rounded-lg border p-4 md:col-span-2">
+      <h2 class="mb-1 text-xl font-bold">Espace message : reserveMessageSpace</h2>
+      <p class="mb-4 text-sm text-m-muted">
+        A gauche : defaut (true) — la ligne message reste reservee sous le champ.
+        A droite : <code>:reserve-message-space="false"</code> — pas de reserve, le bloc suivant colle au champ.
+      </p>
+      <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <div>
+          <p class="mb-1 text-xs font-semibold">Defaut (reserve)</p>
+          <MalioSelectCheckbox
+            v-model="reserveDefaultValue"
+            :options="options"
+            label="Pays"
+            empty-option-label="Aucune selection"
+          />
+          <div class="rounded bg-m-muted/20 p-2 text-xs">Bloc suivant</div>
+        </div>
+        <div>
+          <p class="mb-1 text-xs font-semibold">reserve-message-space = false</p>
+          <MalioSelectCheckbox
+            v-model="reserveOffValue"
+            :options="options"
+            label="Pays"
+            empty-option-label="Aucune selection"
+            :reserve-message-space="false"
+          />
+          <div class="rounded bg-m-muted/20 p-2 text-xs">Bloc suivant</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -214,4 +245,6 @@ const longListValue = ref<Array<string | number>>([])
 const bottomValue = ref<Array<string | number>>([])
 const readonlyEmptyValue = ref<Array<string | number>>([])
 const readonlyFilledValue = ref<Array<string | number>>(['fr'])
+const reserveDefaultValue = ref<Array<string | number>>([])
+const reserveOffValue = ref<Array<string | number>>([])
 </script>