diff --git a/app/components/malio/time/TimePicker.test.ts b/app/components/malio/time/TimePicker.test.ts
new file mode 100644
index 0000000..5514458
--- /dev/null
+++ b/app/components/malio/time/TimePicker.test.ts
@@ -0,0 +1,76 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import TimePicker from './TimePicker.vue'
+
+type TimePickerProps = {
+  id?: string
+  name?: string
+  label?: string
+  modelValue?: string | null
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  clearable?: boolean
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+}
+
+const TimePickerForTest = TimePicker as DefineComponent<TimePickerProps>
+const mountPicker = (props: TimePickerProps = {}) =>
+  mount(TimePickerForTest, {props, attachTo: document.body})
+
+describe('MalioTimePicker', () => {
+  it('affiche le label et l\'icône horloge', () => {
+    const wrapper = mountPicker({label: 'Heure'})
+    expect(wrapper.get('label').text()).toBe('Heure')
+    expect(wrapper.find('[data-test="clock-icon"]').exists()).toBe(true)
+  })
+
+  it('affiche la valeur HH:MM dans le champ', () => {
+    const wrapper = mountPicker({modelValue: '14:30'})
+    const input = wrapper.get('[data-test="time-field"]').element as HTMLInputElement
+    expect(input.value).toBe('14:30')
+  })
+
+  it('ouvre le popover à molettes au clic', async () => {
+    const wrapper = mountPicker()
+    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    await wrapper.get('[data-test="time-field"]').trigger('click')
+    expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="time-wheels"]').exists()).toBe(true)
+  })
+
+  it('n\'ouvre pas le popover si disabled', async () => {
+    const wrapper = mountPicker({disabled: true})
+    await wrapper.get('[data-test="time-field"]').trigger('click')
+    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+  })
+
+  it('émet la valeur réglée depuis les molettes', async () => {
+    const wrapper = mountPicker({modelValue: '09:30'})
+    await wrapper.get('[data-test="time-field"]').trigger('click')
+    wrapper.findComponent({name: 'MalioTimeWheels'}).vm.$emit('update:modelValue', '10:30')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['10:30'])
+  })
+
+  it('émet null au clic sur la croix', async () => {
+    const wrapper = mountPicker({modelValue: '14:30'})
+    await wrapper.get('[data-test="clear"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
+  })
+
+  it('positionne aria-invalid et describedby sur erreur', () => {
+    const wrapper = mountPicker({error: 'Heure requise'})
+    const input = wrapper.get('[data-test="time-field"]')
+    expect(input.attributes('aria-invalid')).toBe('true')
+    expect(input.attributes('aria-describedby')).toBeTruthy()
+    expect(wrapper.text()).toContain('Heure requise')
+  })
+})
diff --git a/app/components/malio/time/TimePicker.vue b/app/components/malio/time/TimePicker.vue
new file mode 100644
index 0000000..f699b0a
--- /dev/null
+++ b/app/components/malio/time/TimePicker.vue
@@ -0,0 +1,222 @@
+<template>
+  <div>
+    <div
+      ref="root"
+      :class="mergedGroupClass"
+    >
+      <input
+        :id="inputId"
+        :name="name"
+        data-test="time-field"
+        readonly
+        autocomplete="off"
+        :class="mergedInputClass"
+        :required="required"
+        :disabled="disabled"
+        :value="displayValue"
+        :aria-invalid="!!error"
+        :aria-describedby="describedBy"
+        :aria-expanded="isOpen"
+        aria-haspopup="dialog"
+        v-bind="attrs"
+        placeholder="_"
+        type="text"
+        @click="onFieldClick"
+      >
+
+      <label
+        v-if="label"
+        :for="inputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
+
+      <div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
+        <button
+          v-if="showClear"
+          type="button"
+          data-test="clear"
+          class="text-m-muted hover:text-m-primary"
+          aria-label="Effacer l'heure"
+          @click.stop="onClear"
+        >
+          <Icon icon="mdi:close" :width="16" :height="16" />
+        </button>
+        <Icon
+          data-test="clock-icon"
+          icon="mdi:clock-outline"
+          :width="24"
+          :height="24"
+          :class="iconStateClass"
+        />
+      </div>
+
+      <div
+        v-if="isOpen"
+        data-test="popover"
+        role="dialog"
+        class="absolute left-0 right-0 top-full z-20 box-border w-full bg-white p-[10px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+      >
+        <TimeWheels
+          :model-value="wheelsValue"
+          @update:model-value="onWheelChange"
+        />
+      </div>
+    </div>
+
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${inputId}-describedby`"
+      :class="[
+        hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
+        'mt-1 ml-[2px] text-xs',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, onBeforeUnmount, onMounted, ref, useAttrs, useId} from 'vue'
+import {Icon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+import TimeWheels from './internal/TimeWheels.vue'
+
+defineOptions({name: 'MalioTimePicker', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    name?: string
+    label?: string
+    modelValue?: string | null
+    placeholder?: string
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    clearable?: boolean
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    label: '',
+    modelValue: undefined,
+    placeholder: 'HH:MM',
+    required: false,
+    disabled: false,
+    readonly: false,
+    hint: '',
+    error: '',
+    success: '',
+    clearable: true,
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+  },
+)
+
+const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
+
+const attrs = useAttrs()
+const generatedId = useId()
+const root = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const localValue = ref<string | null>(null)
+
+const isControlled = computed(() => props.modelValue !== undefined)
+const currentValue = computed(() => (isControlled.value ? props.modelValue : localValue.value))
+
+const inputId = computed(() => props.id?.toString() || `malio-time-picker-${generatedId}`)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const displayValue = computed(() => currentValue.value ?? '')
+const isFilled = computed(() => displayValue.value.length > 0)
+const wheelsValue = computed(() => currentValue.value || '00:00')
+const showClear = computed(() =>
+  props.clearable && isFilled.value && !props.disabled && !props.readonly,
+)
+const describedBy = computed(() =>
+  (props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
+)
+
+const commit = (value: string | null) => {
+  if (!isControlled.value) localValue.value = value
+  emit('update:modelValue', value)
+}
+
+const onWheelChange = (value: string) => commit(value)
+
+const onClear = () => {
+  commit(null)
+}
+
+const onFieldClick = () => {
+  if (props.disabled || props.readonly) return
+  isOpen.value = !isOpen.value
+}
+
+const onMouseDown = (event: MouseEvent) => {
+  if (!isOpen.value || !root.value) return
+  if (!root.value.contains(event.target as Node)) isOpen.value = false
+}
+
+onMounted(() => document.addEventListener('mousedown', onMouseDown))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))
+
+const mergedGroupClass = computed(() =>
+  twMerge('relative flex h-12 w-full items-center', props.groupClass),
+)
+
+const mergedInputClass = computed(() =>
+  twMerge(
+    'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
+    isFilled.value ? 'border-black' : 'border-m-muted',
+    props.disabled ? 'cursor-not-allowed border-m-muted text-black/60' : '',
+    hasError.value
+      ? 'border-m-danger'
+      : hasSuccess.value
+        ? 'border-m-success'
+        : 'focus:border-m-primary',
+    isOpen.value ? 'border-m-primary !rounded-b-none !py-[9px]' : '',
+    props.inputClass,
+  ),
+)
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'floating-label absolute left-3 top-2 mt-[5px] inline-block origin-left text-sm font-medium transition-transform duration-150',
+    (isFilled.value || isOpen.value) ? '-translate-y-[1.25rem] scale-90' : '',
+    hasError.value
+      ? 'text-m-danger'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : isOpen.value
+          ? 'text-m-primary'
+          : 'text-black peer-placeholder-shown:text-m-muted',
+    props.labelClass,
+  ),
+)
+
+const iconStateClass = computed(() => {
+  if (hasError.value) return 'text-m-danger'
+  if (hasSuccess.value) return 'text-m-success'
+  if (isOpen.value) return 'text-m-primary'
+  if (isFilled.value) return 'text-black'
+  return 'text-m-muted'
+})
+</script>
+
+<style scoped>
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+</style>