From 3e3e0242b1e375d915e20251ef24fdc57ef5a425 Mon Sep 17 00:00:00 2001
From: Vincent Baaij <vnbaaij@outlook.com>
Date: Tue, 14 Jul 2026 16:06:44 +0200
Subject: [PATCH 1/4] Use one fluent-text to display all messages instead of
 multiple fluent-text's

---
 .../Documentation/Components/Forms/Forms.md   |  2 +-
 .../Forms/FluentValidationMessage.razor       | 24 +++++++++++--------
 .../Forms/FluentValidationMessage.razor.cs    |  1 +
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Forms.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Forms.md
index 6da78db158..16a4f2b121 100644
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Forms.md
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Forms.md
@@ -19,7 +19,7 @@ By default the Fluent UI components render validation feedback using the library
 builder.Services.AddFluentUIComponents(config =>
 {
     // Default is false. Set to true to enable the browser's native constraint validation UI.
-    config.UseNativeConstraintValidationUi = true;
+    config.UseNativeConstraintValidationUI = true;
 });
 ```
 
diff --git a/src/Core/Components/Forms/FluentValidationMessage.razor b/src/Core/Components/Forms/FluentValidationMessage.razor
index 893d4a34ea..79b00800bd 100644
--- a/src/Core/Components/Forms/FluentValidationMessage.razor
+++ b/src/Core/Components/Forms/FluentValidationMessage.razor
@@ -2,15 +2,19 @@
 @inherits FluentComponentBase
 @typeparam TValue
 
-@foreach (var message in ValidationMessages)
-{
-    <FluentText slot="@FluentSlot.FieldMessage"
-                Class="@ClassValue"
-                Style="@StyleValue"
-                Size="@TextSize.Size200"
-                Color="@Color.Error"
-                @attributes="AdditionalAttributes">
+<FluentText slot="@FluentSlot.FieldMessage"
+            Class="@ClassValue"
+            Style="@StyleValue"
+            Size="@TextSize.Size200"
+            Color="@Color.Error"
+            @attributes="AdditionalAttributes">
+    @foreach (var message in ValidationMessages)
+    {
         @CreateIcon(Icon)
         @message
-    </FluentText>
-}
+        @if (message != ValidationMessages.Last())
+        {
+            <br />
+        }
+    }
+</FluentText>
diff --git a/src/Core/Components/Forms/FluentValidationMessage.razor.cs b/src/Core/Components/Forms/FluentValidationMessage.razor.cs
index ef46007682..9055a6ae08 100644
--- a/src/Core/Components/Forms/FluentValidationMessage.razor.cs
+++ b/src/Core/Components/Forms/FluentValidationMessage.razor.cs
@@ -56,6 +56,7 @@ public FluentValidationMessage(LibraryConfiguration configuration) : base(config
 
     /// <summary />
     protected string? StyleValue => DefaultStyleBuilder
+        .AddStyle("display", "inline-block")
         .Build();
 
     private IEnumerable<string> ValidationMessages => _hasFieldIdentifier

From 66f8a6d30a172a5afa14124d3db8092d0e2cb111 Mon Sep 17 00:00:00 2001
From: Vincent Baaij <vnbaaij@outlook.com>
Date: Tue, 14 Jul 2026 17:28:34 +0200
Subject: [PATCH 2/4] - Render each message in its own div - style through
 isolated css

---
 .../Components/Forms/FluentValidationMessage.razor   | 12 +++++-------
 .../Forms/FluentValidationMessage.razor.cs           |  1 -
 .../Forms/FluentValidationMessage.razor.css          |  5 +++++
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/Core/Components/Forms/FluentValidationMessage.razor b/src/Core/Components/Forms/FluentValidationMessage.razor
index 79b00800bd..095a82a91e 100644
--- a/src/Core/Components/Forms/FluentValidationMessage.razor
+++ b/src/Core/Components/Forms/FluentValidationMessage.razor
@@ -9,12 +9,10 @@
             Color="@Color.Error"
             @attributes="AdditionalAttributes">
     @foreach (var message in ValidationMessages)
-    {
-        @CreateIcon(Icon)
-        @message
-        @if (message != ValidationMessages.Last())
-        {
-            <br />
-        }
+    {   <div class="fluent-validation-message-part" >
+            @CreateIcon(Icon)
+            @message
+        </div>
+
     }
 </FluentText>
diff --git a/src/Core/Components/Forms/FluentValidationMessage.razor.cs b/src/Core/Components/Forms/FluentValidationMessage.razor.cs
index 9055a6ae08..ef46007682 100644
--- a/src/Core/Components/Forms/FluentValidationMessage.razor.cs
+++ b/src/Core/Components/Forms/FluentValidationMessage.razor.cs
@@ -56,7 +56,6 @@ public FluentValidationMessage(LibraryConfiguration configuration) : base(config
 
     /// <summary />
     protected string? StyleValue => DefaultStyleBuilder
-        .AddStyle("display", "inline-block")
         .Build();
 
     private IEnumerable<string> ValidationMessages => _hasFieldIdentifier
diff --git a/src/Core/Components/Forms/FluentValidationMessage.razor.css b/src/Core/Components/Forms/FluentValidationMessage.razor.css
index f0c57884a9..fd289b653d 100644
--- a/src/Core/Components/Forms/FluentValidationMessage.razor.css
+++ b/src/Core/Components/Forms/FluentValidationMessage.razor.css
@@ -1,4 +1,9 @@
 .fluent-validation-message {
+  display: inline-block;
+  align-items: center;
+}
+
+.fluent-validation-message-part {
   display: flex;
   align-items: center;
 }

From 66bf04b143c8e166eda1d26442994c7e126d9f43 Mon Sep 17 00:00:00 2001
From: Vincent Baaij <vnbaaij@outlook.com>
Date: Wed, 15 Jul 2026 08:57:15 +0200
Subject: [PATCH 3/4] Simplify class name for message

---
 src/Core/Components/Forms/FluentValidationMessage.razor    | 2 +-
 .../Components/Forms/FluentValidationMessage.razor.css     | 7 +------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/Core/Components/Forms/FluentValidationMessage.razor b/src/Core/Components/Forms/FluentValidationMessage.razor
index 095a82a91e..e9537379d7 100644
--- a/src/Core/Components/Forms/FluentValidationMessage.razor
+++ b/src/Core/Components/Forms/FluentValidationMessage.razor
@@ -9,7 +9,7 @@
             Color="@Color.Error"
             @attributes="AdditionalAttributes">
     @foreach (var message in ValidationMessages)
-    {   <div class="fluent-validation-message-part" >
+    {   <div class="message" >
             @CreateIcon(Icon)
             @message
         </div>
diff --git a/src/Core/Components/Forms/FluentValidationMessage.razor.css b/src/Core/Components/Forms/FluentValidationMessage.razor.css
index fd289b653d..fdce72710d 100644
--- a/src/Core/Components/Forms/FluentValidationMessage.razor.css
+++ b/src/Core/Components/Forms/FluentValidationMessage.razor.css
@@ -1,9 +1,4 @@
-.fluent-validation-message {
-  display: inline-block;
-  align-items: center;
-}
-
-.fluent-validation-message-part {
+.fluent-validation-message > .message {
   display: flex;
   align-items: center;
 }

From c6b701450c4e6848ad51486e465279652e9174e7 Mon Sep 17 00:00:00 2001
From: Vincent Baaij <vnbaaij@outlook.com>
Date: Wed, 15 Jul 2026 11:52:37 +0200
Subject: [PATCH 4/4] Use attribute instead of class

---
 src/Core/Components/Forms/FluentValidationMessage.razor     | 2 +-
 src/Core/Components/Forms/FluentValidationMessage.razor.css | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Core/Components/Forms/FluentValidationMessage.razor b/src/Core/Components/Forms/FluentValidationMessage.razor
index e9537379d7..cf7da2d972 100644
--- a/src/Core/Components/Forms/FluentValidationMessage.razor
+++ b/src/Core/Components/Forms/FluentValidationMessage.razor
@@ -9,7 +9,7 @@
             Color="@Color.Error"
             @attributes="AdditionalAttributes">
     @foreach (var message in ValidationMessages)
-    {   <div class="message" >
+    {   <div message >
             @CreateIcon(Icon)
             @message
         </div>
diff --git a/src/Core/Components/Forms/FluentValidationMessage.razor.css b/src/Core/Components/Forms/FluentValidationMessage.razor.css
index fdce72710d..d21a42c6d9 100644
--- a/src/Core/Components/Forms/FluentValidationMessage.razor.css
+++ b/src/Core/Components/Forms/FluentValidationMessage.razor.css
@@ -1,4 +1,5 @@
-.fluent-validation-message > .message {
+.fluent-validation-message > div[message] {
   display: flex;
   align-items: center;
+  border: 1px dotted green;
 }