[#363] Création d'un composant de type checkbox (#5)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|        #363          |        Création d'un composant de type checkbox       |

## Description de la PR

## Modification du .env

## Check list

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

Co-authored-by: tristan <tristan@yuno.malio.fr>
Reviewed-on: #5
Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-committed-by: kevin <kevin@yuno.malio.fr>

.playground/pages/composant/checkbox.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple</h2>
+      <MalioCheckbox
+        v-model="simpleValue"
+        label="Accepter les conditions"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Coche par default</h2>
+      <MalioCheckbox
+        v-model="checkedValue"
+        label="Recevoir la newsletter"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Hint</h2>
+      <MalioCheckbox
+        v-model="hintValue"
+        label="J'accepte le traitement des donnees"
+        hint="Vous pouvez retirer votre consentement a tout moment."
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioCheckbox
+        :model-value="false"
+        label="Accepter les CGU"
+        error="Ce champ est obligatoire."
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succès</h2>
+      <MalioCheckbox
+        :model-value="true"
+        label="Adresse vérifiée"
+        success="Choix valide."
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Disabled et Readonly</h2>
+      <div class="space-y-4">
+        <MalioCheckbox
+          :model-value="true"
+          label="Option désactivée"
+          disabled
+        />
+        <MalioCheckbox
+          :model-value="true"
+          label="Option readonly"
+          readonly
+        />
+      </div>
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Plusieurs checkbox</h2>
+      <div class="space-y-4">
+        <MalioCheckbox
+          label="Option 1"
+        />
+        <MalioCheckbox
+          label="Option 2"
+        />
+        <MalioCheckbox
+          label="Option 3"
+        />
+    </div>
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Plusieurs checkbox avec v-for</h2>
+      <div class="space-y-4">
+        <MalioCheckbox
+          v-for="option in options"
+          :key="option"
+          :label="option"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioCheckbox from '../../../app/components/malio/Checkbox.vue'
+const simpleValue = ref(false)
+const checkedValue = ref(true)
+const hintValue = ref(false)
+const options = [
+  'Option A',
+  'Option B',
+  'Option C',
+  'Option D',
+
+]
+</script>