diff --git a/frontend/app/pages/component/[id]/index.vue b/frontend/app/pages/component/[id]/index.vue
index 28aa96e..4b6ab91 100644
--- a/frontend/app/pages/component/[id]/index.vue
+++ b/frontend/app/pages/component/[id]/index.vue
@@ -408,6 +408,9 @@
                 </header>
                 <template v-if="isEditMode">
                   <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
+                  <p v-if="hasRequiredCustomFields && !requiredCustomFieldsFilled" class="text-xs text-warning">
+                    Certains champs personnalisés sont obligatoires. Veuillez les renseigner avant de valider.
+                  </p>
                 </template>
                 <template v-else>
                   <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -468,6 +471,9 @@
               Enregistrer les modifications
             </button>
           </div>
+          <p v-if="isEditMode && hasRequiredCustomFields && !requiredCustomFieldsFilled" class="text-xs text-error text-right">
+            Merci de renseigner tous les champs personnalisés obligatoires.
+          </p>
         </div>
       </section>
     </main>
@@ -511,6 +517,7 @@ const {
   constructeurLinks,
   constructeurIdsFromForm,
   customFieldInputs,
+  requiredCustomFieldsFilled,
   historyFieldLabels,
   canSubmit,
   componentTypeList,
@@ -538,6 +545,8 @@ const {
   formatStructurePreview,
 } = useComponentEdit(String(route.params.id))
 
+const hasRequiredCustomFields = computed(() => customFieldInputs.value.some(f => f.required))
+
 const submitEdition = async () => {
   await _submitEdition()
   if (!saving.value) {
diff --git a/frontend/app/pages/component/create.vue b/frontend/app/pages/component/create.vue
index 8b2e005..05f63b8 100644
--- a/frontend/app/pages/component/create.vue
+++ b/frontend/app/pages/component/create.vue
@@ -223,6 +223,9 @@
                 </p>
               </header>
               <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || submitting" />
+              <p v-if="hasRequiredCustomFields && !requiredCustomFieldsFilled" class="text-xs text-warning">
+                Certains champs personnalisés sont obligatoires. Veuillez les renseigner avant de valider.
+              </p>
             </div>
             <EmptyState
               v-else
@@ -242,6 +245,9 @@
             Créer le composant
           </button>
         </div>
+        <p v-if="selectedType && hasRequiredCustomFields && !requiredCustomFieldsFilled" class="text-xs text-error text-right">
+          Merci de renseigner tous les champs personnalisés obligatoires avant de créer le composant.
+        </p>
       </div>
     </section>
   </main>
@@ -290,8 +296,11 @@ const {
   resolveProductLabel,
   resolveSubcomponentLabel,
   submitCreation,
+  requiredCustomFieldsFilled,
 } = useComponentCreate()
 
+const hasRequiredCustomFields = computed(() => customFieldInputs.value.some(f => f.required))
+
 const entityTabs = computed(() => [
   { key: 'general', label: 'Général' },
   { key: 'structure', label: 'Structure' },
diff --git a/makefile b/makefile
index 9a1b57c..1493086 100644
--- a/makefile
+++ b/makefile
@@ -127,6 +127,12 @@ php-cs-fixer-allow-risky:
 test:
 	$(EXEC_PHP) php -d memory_limit="512M" vendor/bin/phpunit $(FILES)
 
+test-front:
+	cd frontend && npx vitest run $(FILES)
+
+test-front-watch:
+	cd frontend && npx vitest --watch $(FILES)
+
 test-setup:
 	$(SYMFONY_CONSOLE) doctrine:database:create --if-not-exists --env=test
 	$(SYMFONY_CONSOLE) doctrine:schema:update --force --env=test