From 2d8639a913f48bb944642f022a5cdb5f0f0a45cd Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 3 Jun 2026 12:03:15 +0200
Subject: [PATCH] docs(playground) : exemples required + email lowercase

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../pages/composant/input/inputEmail.vue      | 20 +++++++++++++++++++
 .../pages/composant/input/inputText.vue       |  8 ++++++++
 .playground/pages/composant/select/select.vue | 12 +++++++++++
 3 files changed, 40 insertions(+)

diff --git a/.playground/pages/composant/input/inputEmail.vue b/.playground/pages/composant/input/inputEmail.vue
index 38c6791..665f17f 100644
--- a/.playground/pages/composant/input/inputEmail.vue
+++ b/.playground/pages/composant/input/inputEmail.vue
@@ -84,6 +84,24 @@
         :success="dynamicSuccess"
       />
     </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Email obligatoire</h2>
+      <MalioInputEmail
+        v-model="requiredEmail"
+        label="Email obligatoire"
+        :required="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Email normalisé (minuscules)</h2>
+      <MalioInputEmail
+        v-model="lowercaseEmail"
+        label="Email normalisé (minuscules)"
+        :lowercase="true"
+      />
+    </div>
   </div>
 </template>
 
@@ -92,6 +110,8 @@ import { computed, ref } from 'vue'
 
 const emailValue = ref('')
 const dynamicEmail = ref('')
+const requiredEmail = ref('')
+const lowercaseEmail = ref('')
 
 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 const isDynamicValid = computed(() => emailRegex.test(dynamicEmail.value))
diff --git a/.playground/pages/composant/input/inputText.vue b/.playground/pages/composant/input/inputText.vue
index e329107..2a118a9 100644
--- a/.playground/pages/composant/input/inputText.vue
+++ b/.playground/pages/composant/input/inputText.vue
@@ -108,6 +108,14 @@
         icon-size="20"
       />
     </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Champ obligatoire</h2>
+      <MalioInputText
+        label="Champ obligatoire"
+        :required="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec masque</h2>
       <MalioInputText
diff --git a/.playground/pages/composant/select/select.vue b/.playground/pages/composant/select/select.vue
index af406fb..19d2a02 100644
--- a/.playground/pages/composant/select/select.vue
+++ b/.playground/pages/composant/select/select.vue
@@ -82,6 +82,17 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Sélection obligatoire</h2>
+      <MalioSelect
+        v-model="requiredValue"
+        :options="options"
+        label="Sélection obligatoire"
+        :required="true"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Peu d'elements (2)</h2>
       <MalioSelect
@@ -151,6 +162,7 @@ const longOptions = [
   {label: 'Republique tcheque', value: 'cz'},
 ]
 
+const requiredValue = ref<string | number | null>(null)
 const basicValue = ref<string | number | null>(null)
 const labelValue = ref<string | number | null>(null)
 const selectedValue = ref<string | number | null>('fr')