fix: multi-select (#90)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

---------

Co-authored-by: admin malio <malio@yuno.malio.fr>
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #90
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

.playground/pages/composant/select/selectCheckbox.vue

@@ -17,6 +17,27 @@
         empty-option-label=" "
       />
       </div>
+      <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec tag + max tags (3)</h2>
+      <MalioSelectCheckbox
+        v-model="maxTagsValue"
+        :options="options"
+        :display-tag="true"
+        :max-tags="3"
+        label="Pays"
+        empty-option-label=" "
+      />
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec tag + couleurs</h2>
+      <MalioSelectCheckbox
+        v-model="colorValue"
+        :options="colorOptions"
+        :display-tag="true"
+        label="Pays"
+        empty-option-label=" "
+      />
+    </div>
       <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec tag + label</h2>
       <MalioSelectCheckbox
@@ -185,6 +206,15 @@ const options = [
   {label: 'Portugal', value: 'pt'},
 ]
 
+const colorOptions = [
+  {label: 'France', value: 'fr', color: '#fde2e2'},
+  {label: 'Belgique', value: 'be', color: '#fff3cd'},
+  {label: 'Suisse', value: 'ch', color: '#d1e7dd'},
+  {label: 'Canada', value: 'ca', color: '#cfe2ff'},
+  {label: 'Allemagne', value: 'de'},
+  {label: 'Espagne', value: 'es', color: '#e2d9f3'},
+]
+
 const longOptions = [
   ...options,
   {label: 'Pays-Bas', value: 'nl'},
@@ -203,6 +233,8 @@ const longOptions = [
 const basicValue = ref<Array<string | number>>([])
 const labelValue = ref<Array<string | number>>([])
 const labelValue1 = ref<Array<string | number>>([])
+const maxTagsValue = ref<Array<string | number>>(['fr', 'be', 'ch', 'ca', 'de'])
+const colorValue = ref<Array<string | number>>(['fr', 'be', 'de'])
 const selectedValue = ref<Array<string | number>>(['fr'])
 const hintValue = ref<Array<string | number>>([])
 const errorValue = ref<Array<string | number>>([])