[#364 ] Création d'un composant de type radio (#6)

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

## 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é

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

.playground/pages/composant/radioButton.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="grid grid-cols-2 gap-6 md:grid-cols-3">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple</h2>
+      <div class="space-y-1">
+        <MalioRadioButton
+          v-for="option in options"
+          :key="`simple-${option.value}`"
+          v-model="primaryChoice"
+          :label="option.label"
+          :value="option.value"
+          name="primary-choice"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Preselected</h2>
+      <div class="space-y-1">
+        <MalioRadioButton
+          v-for="option in options"
+          :key="`preselected-${option.value}`"
+          v-model="preselectedChoice"
+          :label="option.label"
+          :value="option.value"
+          name="preselected-choice"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Error</h2>
+      <div class="space-y-1">
+        <MalioRadioButton
+          v-for="option in options"
+          :key="`error-${option.value}`"
+          v-model="errorChoice"
+          :label="option.label"
+          :value="option.value"
+          name="error-choice"
+          error="Selection required"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Success</h2>
+      <div class="space-y-1">
+        <MalioRadioButton
+          v-for="option in options"
+          :key="`success-${option.value}`"
+          v-model="successChoice"
+          :label="option.label"
+          :value="option.value"
+          name="success-choice"
+          success="Selection saved"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Disabled</h2>
+      <div class="space-y-1">
+        <MalioRadioButton
+          v-for="option in options"
+          :key="`disabled-${option.value}`"
+          v-model="disabledChoice"
+          :label="option.label"
+          :value="option.value"
+          name="disabled-choice"
+          disabled
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+      <div class="space-y-1">
+        <MalioRadioButton
+          v-for="option in options"
+          :key="`readonly-${option.value}`"
+          v-model="readonlyChoice"
+          :label="option.label"
+          :value="option.value"
+          name="readonly-choice"
+          readonly
+          hint="Readonly group"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioRadioButton from '../../../app/components/malio/RadioButton.vue'
+
+const options = [
+  {label: 'Option 1', value: 'option1'},
+  {label: 'Option 2', value: 'option2'},
+  {label: 'Option 3', value: 'option3'},
+  {label: 'Option 4', value: 'option4'},
+]
+
+const primaryChoice = ref<string | null>(null)
+const preselectedChoice = ref<string | null>('option2')
+const errorChoice = ref<string | null>(null)
+const successChoice = ref<string | null>('option3')
+const disabledChoice = ref<string | null>('option2')
+const readonlyChoice = ref<string | null>('option4')
+</script>