From 6d66d0145ffe5da44a132136df723746882a59ed Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@gmail.com>
Date: Thu, 2 Jul 2026 11:57:46 +0300
Subject: [PATCH] FormField: fix invalid/empty label for association

RadzenFormField rendered for="@Component" on the wrapping <div> (invalid - <div>
does not take for) and on the label even when Component was unset, producing for=""
which accessibility checkers flag as a label with no association. Removed the div
for and only emit the label for when Component is set. Updated the FormFieldTextBox
demo to give each input an id matching the FormField Component so the label resolves.
---
 Radzen.Blazor/RadzenFormField.razor            |  4 ++--
 RadzenBlazorDemos/Pages/FormFieldTextBox.razor | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/Radzen.Blazor/RadzenFormField.razor b/Radzen.Blazor/RadzenFormField.razor
index 55b90601f..361270e7a 100644
--- a/Radzen.Blazor/RadzenFormField.razor
+++ b/Radzen.Blazor/RadzenFormField.razor
@@ -3,7 +3,7 @@
 
 @if (Visible)
 {
-<div @ref="@Element" for="@Component" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
+<div @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
     <div class="rz-form-field-content">
         <CascadingValue Value=@context>
         @if (Start != null)
@@ -13,7 +13,7 @@
         </div>
         }
         @ChildContent
-        <label class="rz-form-field-label rz-text-truncate" for=@Component>  @if (TextTemplate is null) {@Text} else {@TextTemplate} </label>
+        <label class="rz-form-field-label rz-text-truncate" for="@(string.IsNullOrEmpty(Component) ? null : Component)">  @if (TextTemplate is null) {@Text} else {@TextTemplate} </label>
         @if (End != null)
         {
         <div class="rz-form-field-end">
diff --git a/RadzenBlazorDemos/Pages/FormFieldTextBox.razor b/RadzenBlazorDemos/Pages/FormFieldTextBox.razor
index c70e4d699..f31ac2e14 100644
--- a/RadzenBlazorDemos/Pages/FormFieldTextBox.razor
+++ b/RadzenBlazorDemos/Pages/FormFieldTextBox.razor
@@ -1,22 +1,22 @@
 <RadzenRow AlignItems="AlignItems.End" Wrap="FlexWrap.Wrap" Gap="1rem" class="rz-p-sm-12">
     <RadzenColumn Size="12" SizeMD="6" SizeLG="3">
-        <RadzenFormField Text="Outlined/Default" Style="width: 100%;">
-            <RadzenTextBox @bind-Value="@value" />
+        <RadzenFormField Text="Outlined/Default" Component="FormFieldTextBoxOutlined" Style="width: 100%;">
+            <RadzenTextBox id="FormFieldTextBoxOutlined" @bind-Value="@value" />
         </RadzenFormField>
     </RadzenColumn>
     <RadzenColumn Size="12" SizeMD="6" SizeLG="3">
-        <RadzenFormField Text="Text" Variant="Variant.Text" Style="width: 100%;">
-            <RadzenTextBox @bind-Value="@value" />
+        <RadzenFormField Text="Text" Variant="Variant.Text" Component="FormFieldTextBoxText" Style="width: 100%;">
+            <RadzenTextBox id="FormFieldTextBoxText" @bind-Value="@value" />
         </RadzenFormField>
     </RadzenColumn>
     <RadzenColumn Size="12" SizeMD="6" SizeLG="3">
-        <RadzenFormField Text="Flat" Variant="Variant.Flat" Style="width: 100%;">
-            <RadzenTextBox @bind-Value="@value" />
+        <RadzenFormField Text="Flat" Variant="Variant.Flat" Component="FormFieldTextBoxFlat" Style="width: 100%;">
+            <RadzenTextBox id="FormFieldTextBoxFlat" @bind-Value="@value" />
         </RadzenFormField>
     </RadzenColumn>
     <RadzenColumn Size="12" SizeMD="6" SizeLG="3">
-        <RadzenFormField Text="Filled" Variant="Variant.Filled" Style="width: 100%;">
-            <RadzenTextBox @bind-Value="@value" />
+        <RadzenFormField Text="Filled" Variant="Variant.Filled" Component="FormFieldTextBoxFilled" Style="width: 100%;">
+            <RadzenTextBox id="FormFieldTextBoxFilled" @bind-Value="@value" />
         </RadzenFormField>
     </RadzenColumn>
 </RadzenRow>