From 120020b210feaf6058c6b0e2ee99095d34ce5714 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 3 Jun 2026 11:45:48 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20ast=C3=A9risque=20required=20dans?=
 =?UTF-8?q?=20le=20label=20de=20la=20famille=20formulaire?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/malio/checkbox/Checkbox.test.ts       | 10 ++++++++++
 app/components/malio/checkbox/Checkbox.vue           |  3 ++-
 app/components/malio/date/Date.test.ts               | 10 ++++++++++
 app/components/malio/date/internal/CalendarField.vue |  3 ++-
 app/components/malio/input/Input.test.ts             | 10 ++++++++++
 app/components/malio/input/InputAmount.test.ts       | 10 ++++++++++
 app/components/malio/input/InputAmount.vue           |  3 ++-
 app/components/malio/input/InputAutocomplete.test.ts | 10 ++++++++++
 app/components/malio/input/InputAutocomplete.vue     |  3 ++-
 app/components/malio/input/InputEmail.test.ts        | 10 ++++++++++
 app/components/malio/input/InputEmail.vue            |  3 ++-
 app/components/malio/input/InputNumber.test.ts       | 11 +++++++++++
 app/components/malio/input/InputNumber.vue           |  3 ++-
 app/components/malio/input/InputPassword.test.ts     | 10 ++++++++++
 app/components/malio/input/InputPassword.vue         |  3 ++-
 app/components/malio/input/InputPhone.test.ts        | 10 ++++++++++
 app/components/malio/input/InputPhone.vue            |  3 ++-
 app/components/malio/input/InputText.vue             |  3 ++-
 app/components/malio/input/InputTextArea.test.ts     | 10 ++++++++++
 app/components/malio/input/InputTextArea.vue         |  3 ++-
 app/components/malio/radio/RadioButton.test.ts       | 10 ++++++++++
 app/components/malio/radio/RadioButton.vue           |  3 ++-
 app/components/malio/time/Time.test.ts               | 10 ++++++++++
 app/components/malio/time/Time.vue                   |  3 ++-
 app/components/malio/time/TimePicker.test.ts         | 10 ++++++++++
 app/components/malio/time/TimePicker.vue             |  3 ++-
 26 files changed, 157 insertions(+), 13 deletions(-)

diff --git a/app/components/malio/checkbox/Checkbox.test.ts b/app/components/malio/checkbox/Checkbox.test.ts
index 0f27fa1..c291ced 100644
--- a/app/components/malio/checkbox/Checkbox.test.ts
+++ b/app/components/malio/checkbox/Checkbox.test.ts
@@ -161,4 +161,14 @@ describe('MalioCheckbox', () => {
 
     expect(wrapper.get('label').classes()).toContain('text-black')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountCheckbox({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountCheckbox({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
 })
diff --git a/app/components/malio/checkbox/Checkbox.vue b/app/components/malio/checkbox/Checkbox.vue
index a5ee3df..b4de360 100644
--- a/app/components/malio/checkbox/Checkbox.vue
+++ b/app/components/malio/checkbox/Checkbox.vue
@@ -25,7 +25,7 @@
         </svg>
       </span>
       <span>
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </span>
     </label>
 
@@ -41,6 +41,7 @@
 <script setup lang="ts">
 import {computed, ref, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioCheckbox', inheritAttrs: false})
 
diff --git a/app/components/malio/date/Date.test.ts b/app/components/malio/date/Date.test.ts
index 9616b32..e4fe4d5 100644
--- a/app/components/malio/date/Date.test.ts
+++ b/app/components/malio/date/Date.test.ts
@@ -40,6 +40,16 @@ describe('MalioDate', () => {
       expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
     })
 
+    it('affiche l\'astérisque quand required est vrai', () => {
+      const wrapper = mountDate({label: 'Champ', required: true})
+      expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+    })
+
+    it('n\'affiche pas l\'astérisque par défaut', () => {
+      const wrapper = mountDate({label: 'Champ'})
+      expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+    })
+
     it('displays the formatted value in the field', () => {
       const wrapper = mountDate({modelValue: '2026-05-19'})
       const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
diff --git a/app/components/malio/date/internal/CalendarField.vue b/app/components/malio/date/internal/CalendarField.vue
index b89d616..b777794 100644
--- a/app/components/malio/date/internal/CalendarField.vue
+++ b/app/components/malio/date/internal/CalendarField.vue
@@ -29,7 +29,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
@@ -100,6 +100,7 @@
 import {computed, ref, useAttrs, useId, watch} from 'vue'
 import {Icon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../../shared/RequiredMark.vue'
 import CalendarHeader from './CalendarHeader.vue'
 import MonthPicker from './MonthPicker.vue'
 import {useCalendarPopover} from '../composables/useCalendarPopover'
diff --git a/app/components/malio/input/Input.test.ts b/app/components/malio/input/Input.test.ts
index 85db24c..82d9c7d 100644
--- a/app/components/malio/input/Input.test.ts
+++ b/app/components/malio/input/Input.test.ts
@@ -53,6 +53,16 @@ describe('MalioInputText', () => {
     expect(wrapper.get('label').text()).toBe('labelTest')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountInput({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountInput({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('applies the name attribute', () => {
     const wrapper = mountInput({name: 'nameTest'})
 
diff --git a/app/components/malio/input/InputAmount.test.ts b/app/components/malio/input/InputAmount.test.ts
index a8c4e2f..1efcba5 100644
--- a/app/components/malio/input/InputAmount.test.ts
+++ b/app/components/malio/input/InputAmount.test.ts
@@ -174,4 +174,14 @@ describe('MalioInputAmount', () => {
 
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountInputAmount({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountInputAmount({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
 })
diff --git a/app/components/malio/input/InputAmount.vue b/app/components/malio/input/InputAmount.vue
index 3226bdc..4d2c1e7 100644
--- a/app/components/malio/input/InputAmount.vue
+++ b/app/components/malio/input/InputAmount.vue
@@ -30,7 +30,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <IconifyIcon
@@ -63,6 +63,7 @@
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputAmount', inheritAttrs: false})
 
diff --git a/app/components/malio/input/InputAutocomplete.test.ts b/app/components/malio/input/InputAutocomplete.test.ts
index 64810f8..ff397dc 100644
--- a/app/components/malio/input/InputAutocomplete.test.ts
+++ b/app/components/malio/input/InputAutocomplete.test.ts
@@ -65,6 +65,16 @@ describe('MalioInputAutocomplete', () => {
     expect(wrapper.get('label').text()).toBe('Pays')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountComponent({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountComponent({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('renders with type combobox role', () => {
     const wrapper = mountComponent()
 
diff --git a/app/components/malio/input/InputAutocomplete.vue b/app/components/malio/input/InputAutocomplete.vue
index 00321f5..b9f904b 100644
--- a/app/components/malio/input/InputAutocomplete.vue
+++ b/app/components/malio/input/InputAutocomplete.vue
@@ -33,7 +33,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <IconifyIcon
@@ -151,6 +151,7 @@
 import {computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputAutocomplete', inheritAttrs: false})
 
diff --git a/app/components/malio/input/InputEmail.test.ts b/app/components/malio/input/InputEmail.test.ts
index 0e0259c..5a61d5b 100644
--- a/app/components/malio/input/InputEmail.test.ts
+++ b/app/components/malio/input/InputEmail.test.ts
@@ -52,6 +52,16 @@ describe('MalioInputEmail', () => {
     expect(wrapper.get('label').text()).toBe('Adresse email')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountComponent({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountComponent({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('has type email', () => {
     const wrapper = mountComponent()
 
diff --git a/app/components/malio/input/InputEmail.vue b/app/components/malio/input/InputEmail.vue
index e728e1e..c66c0de 100644
--- a/app/components/malio/input/InputEmail.vue
+++ b/app/components/malio/input/InputEmail.vue
@@ -28,7 +28,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <IconifyIcon
@@ -62,6 +62,7 @@
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputEmail', inheritAttrs: false})
 
diff --git a/app/components/malio/input/InputNumber.test.ts b/app/components/malio/input/InputNumber.test.ts
index 7b0ccac..5e5186b 100644
--- a/app/components/malio/input/InputNumber.test.ts
+++ b/app/components/malio/input/InputNumber.test.ts
@@ -6,6 +6,7 @@ import InputNumber from './InputNumber.vue'
 type InputNumberProps = {
   modelValue?: string | null
   label?: string
+  required?: boolean
   readonly?: boolean
   min?: number | string
   max?: number | string
@@ -162,4 +163,14 @@ describe('MalioInputNumber', () => {
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['5'])
     expect(input.element.value).toBe('5')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountInputNumber({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountInputNumber({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
 })
diff --git a/app/components/malio/input/InputNumber.vue b/app/components/malio/input/InputNumber.vue
index 78ed4d2..a42653a 100644
--- a/app/components/malio/input/InputNumber.vue
+++ b/app/components/malio/input/InputNumber.vue
@@ -6,7 +6,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
       <button
         type="button"
@@ -70,6 +70,7 @@
 import {computed, ref, useAttrs, useId} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputNumber', inheritAttrs: false})
 
diff --git a/app/components/malio/input/InputPassword.test.ts b/app/components/malio/input/InputPassword.test.ts
index a201bdb..4019afa 100644
--- a/app/components/malio/input/InputPassword.test.ts
+++ b/app/components/malio/input/InputPassword.test.ts
@@ -51,6 +51,16 @@ describe('MalioInputPassword', () => {
     expect(wrapper.get('label').text()).toBe('Mot de passe')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountComponent({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountComponent({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('has type password by default', () => {
     const wrapper = mountComponent()
 
diff --git a/app/components/malio/input/InputPassword.vue b/app/components/malio/input/InputPassword.vue
index 4bd805d..0c66248 100644
--- a/app/components/malio/input/InputPassword.vue
+++ b/app/components/malio/input/InputPassword.vue
@@ -29,7 +29,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <IconifyIcon
@@ -67,6 +67,7 @@
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputPassword', inheritAttrs: false})
 
diff --git a/app/components/malio/input/InputPhone.test.ts b/app/components/malio/input/InputPhone.test.ts
index 3bce6d5..67acfe7 100644
--- a/app/components/malio/input/InputPhone.test.ts
+++ b/app/components/malio/input/InputPhone.test.ts
@@ -56,6 +56,16 @@ describe('MalioInputPhone', () => {
     expect(wrapper.get('label').text()).toBe('Téléphone')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountComponent({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountComponent({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('has type tel', () => {
     const wrapper = mountComponent()
 
diff --git a/app/components/malio/input/InputPhone.vue b/app/components/malio/input/InputPhone.vue
index 33a61cc..b29c9ba 100644
--- a/app/components/malio/input/InputPhone.vue
+++ b/app/components/malio/input/InputPhone.vue
@@ -29,7 +29,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <IconifyIcon
@@ -82,6 +82,7 @@ import {vMaska} from 'maska/vue'
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputPhone', inheritAttrs: false})
 
diff --git a/app/components/malio/input/InputText.vue b/app/components/malio/input/InputText.vue
index c574f29..066f694 100644
--- a/app/components/malio/input/InputText.vue
+++ b/app/components/malio/input/InputText.vue
@@ -30,7 +30,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <IconifyIcon
@@ -66,6 +66,7 @@ import {vMaska} from 'maska/vue'
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputText', inheritAttrs: false})
 
diff --git a/app/components/malio/input/InputTextArea.test.ts b/app/components/malio/input/InputTextArea.test.ts
index 89913fc..a3767b7 100644
--- a/app/components/malio/input/InputTextArea.test.ts
+++ b/app/components/malio/input/InputTextArea.test.ts
@@ -183,4 +183,14 @@ describe('MalioInputTextArea', () => {
 
     expect(wrapper.get('textarea').classes()).not.toContain('textarea-scrollbar-primary')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mount(InputTextAreaForTest, {props: {label: 'Champ', required: true}})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mount(InputTextAreaForTest, {props: {label: 'Champ'}})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
 })
diff --git a/app/components/malio/input/InputTextArea.vue b/app/components/malio/input/InputTextArea.vue
index 691a892..2e09f13 100644
--- a/app/components/malio/input/InputTextArea.vue
+++ b/app/components/malio/input/InputTextArea.vue
@@ -51,7 +51,7 @@
         textLabel,
         ]"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
       <span
         v-if="showCounterComputed"
@@ -83,6 +83,7 @@
 <script setup lang="ts">
 import {computed, ref, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
 
diff --git a/app/components/malio/radio/RadioButton.test.ts b/app/components/malio/radio/RadioButton.test.ts
index 1a8d714..173bf65 100644
--- a/app/components/malio/radio/RadioButton.test.ts
+++ b/app/components/malio/radio/RadioButton.test.ts
@@ -173,6 +173,16 @@ describe('MalioRadioButton', () => {
     expect(wrapper.get('input').classes()).toContain('checked:border-black')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountRadioButton({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountRadioButton({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('updates label color when toggled without v-model (uncontrolled)', async () => {
     const wrapper = mountRadioButton({label: 'Option 1', value: 'a'})
 
diff --git a/app/components/malio/radio/RadioButton.vue b/app/components/malio/radio/RadioButton.vue
index 92250ea..65f17fa 100644
--- a/app/components/malio/radio/RadioButton.vue
+++ b/app/components/malio/radio/RadioButton.vue
@@ -29,7 +29,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
     </div>
 
@@ -46,6 +46,7 @@
 <script setup lang="ts">
 import {computed, ref, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioRadioButton', inheritAttrs: false})
 
diff --git a/app/components/malio/time/Time.test.ts b/app/components/malio/time/Time.test.ts
index 277f20b..39188ec 100644
--- a/app/components/malio/time/Time.test.ts
+++ b/app/components/malio/time/Time.test.ts
@@ -76,4 +76,14 @@ describe('MalioTime', () => {
     expect(inputs[0].classes()).toContain('border-m-primary')
     expect(inputs[1].classes()).not.toContain('border-m-primary')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountTime({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountTime({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
 })
diff --git a/app/components/malio/time/Time.vue b/app/components/malio/time/Time.vue
index a3801c7..3297331 100644
--- a/app/components/malio/time/Time.vue
+++ b/app/components/malio/time/Time.vue
@@ -6,7 +6,7 @@
         :for="hoursInputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <div class="flex items-center gap-2">
@@ -76,6 +76,7 @@
 <script setup lang="ts">
 import {computed, nextTick, ref, useAttrs, useId, watch} from 'vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioTime', inheritAttrs: false})
 
diff --git a/app/components/malio/time/TimePicker.test.ts b/app/components/malio/time/TimePicker.test.ts
index 5514458..966c2c9 100644
--- a/app/components/malio/time/TimePicker.test.ts
+++ b/app/components/malio/time/TimePicker.test.ts
@@ -73,4 +73,14 @@ describe('MalioTimePicker', () => {
     expect(input.attributes('aria-describedby')).toBeTruthy()
     expect(wrapper.text()).toContain('Heure requise')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountPicker({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountPicker({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
 })
diff --git a/app/components/malio/time/TimePicker.vue b/app/components/malio/time/TimePicker.vue
index 9a5d656..3cddeb6 100644
--- a/app/components/malio/time/TimePicker.vue
+++ b/app/components/malio/time/TimePicker.vue
@@ -26,7 +26,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
@@ -93,6 +93,7 @@
 import {computed, onBeforeUnmount, onMounted, ref, useAttrs, useId} from 'vue'
 import {Icon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 import TimeWheels from './internal/TimeWheels.vue'
 
 defineOptions({name: 'MalioTimePicker', inheritAttrs: false})