From 2eb37eeefa9d6f66af323cd7eb7941b5d751ef70 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Thu, 22 Jan 2026 17:13:23 +0100
Subject: [PATCH] Allow html to help message

---
 demo/app/Sharp/Posts/PostForm.php                | 2 +-
 resources/js/form/components/FormFieldLayout.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/demo/app/Sharp/Posts/PostForm.php b/demo/app/Sharp/Posts/PostForm.php
index 9a398da24..98491435a 100644
--- a/demo/app/Sharp/Posts/PostForm.php
+++ b/demo/app/Sharp/Posts/PostForm.php
@@ -184,7 +184,7 @@ public function buildFormFields(FieldsContainer $formFields): void
                         return $users->get();
                     })
                     ->setListItemTemplate('<div>{{ $name }}</div><div><small>{{ $email }}</small></div>')
-                    ->setHelpMessage('This field is only editable by admins.'),
+                    ->setHelpMessage('This field is only editable by <strong>admins</strong>.'),
             ));
     }
 
diff --git a/resources/js/form/components/FormFieldLayout.vue b/resources/js/form/components/FormFieldLayout.vue
index c7dbb9b0d..a4f5f8436 100644
--- a/resources/js/form/components/FormFieldLayout.vue
+++ b/resources/js/form/components/FormFieldLayout.vue
@@ -141,14 +141,14 @@
                     <template v-if="field.helpMessage || $slots['help-message']">
                         <div :id="`${id}-help-message`" class="grid grid-cols-1 gap-y-2">
                             <template v-if="field.helpMessage || $slots['help-message']">
-                                <p class="text-xs text-muted-foreground leading-4">
+                                <div class="text-xs text-muted-foreground leading-4">
                                     <template v-if="field.helpMessage">
-                                        {{ field.helpMessage }}
+                                        <div class="content" v-html="field.helpMessage"></div>
                                     </template>
                                     <template v-else>
                                         <slot name="help-message"></slot>
                                     </template>
-                                </p>
+                                </div>
                             </template>
                         </div>
                     </template>