Implement nested and non-nested Label support for DisplayName

src/Components/Web/src/Forms/FieldIdGenerator.cs

@@ -0,0 +1,80 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System.Buffers;
+using System.Text;
+
+namespace Microsoft.AspNetCore.Components.Forms;
+
+/// <summary>
+/// Provides methods for generating valid HTML id attribute values from field names.
+/// </summary>
+internal static class FieldIdGenerator
+{
+    // Valid characters for HTML 4.01 id attributes (excluding '.' to avoid CSS selector conflicts)
+    // See: https://www.w3.org/TR/html401/types.html#type-id
+    private static readonly SearchValues<char> ValidIdChars =
+        SearchValues.Create("-0123456789:ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz");
+
+    /// <summary>
+    /// Sanitizes a field name to create a valid HTML id attribute value.
+    /// </summary>
+    /// <param name="fieldName">The field name to sanitize.</param>
+    /// <returns>A valid HTML id attribute value, or an empty string if the input is null or empty.</returns>
+    /// <remarks>
+    /// This method follows HTML 4.01 id attribute rules:
+    /// - The first character must be a letter (A-Z, a-z)
+    /// - Subsequent characters can be letters, digits, hyphens, underscores, colons, or periods
+    /// - Periods are replaced with underscores to avoid CSS selector conflicts
+    /// </remarks>
+    public static string SanitizeHtmlId(string? fieldName)
+    {
+        if (string.IsNullOrEmpty(fieldName))
+        {
+            return string.Empty;
+        }
+
+        // Fast path: check if sanitization is needed
+        var firstChar = fieldName[0];
+        var startsWithLetter = char.IsAsciiLetter(firstChar);
+        var indexOfInvalidChar = fieldName.AsSpan(1).IndexOfAnyExcept(ValidIdChars);
+
+        if (startsWithLetter && indexOfInvalidChar < 0)
+        {
+            return fieldName;
+        }
+
+        // Slow path: build sanitized string
+        var result = new StringBuilder(fieldName.Length);
+
+        // First character must be a letter
+        if (startsWithLetter)
+        {
+            result.Append(firstChar);
+        }
+        else
+        {
+            result.Append('z');
+            if (IsValidIdChar(firstChar))
+            {
+                result.Append(firstChar);
+            }
+            else
+            {
+                result.Append('_');
+            }
+        }
+
+        // Process remaining characters
+        for (var i = 1; i < fieldName.Length; i++)
+        {
+            var c = fieldName[i];
+            result.Append(IsValidIdChar(c) ? c : '_');
+        }
+
+        return result.ToString();
+    }
+
+    private static bool IsValidIdChar(char c)
+        => ValidIdChars.Contains(c);
+}

src/Components/Web/src/Forms/InputBase.cs

@@ -220,6 +220,26 @@ protected string NameAttributeValue
         }
     }
 
+    /// <summary>
+    /// Gets the value to be used for the input's "id" attribute.
+    /// </summary>
+    /// <remarks>
+    /// If an explicit "id" is provided via <see cref="AdditionalAttributes"/>, that value takes precedence.
+    /// Otherwise, the id is derived from <see cref="NameAttributeValue"/> with invalid characters sanitized.
+    /// </remarks>
+    protected string IdAttributeValue
+    {
+        get
+        {
+            if (AdditionalAttributes?.TryGetValue("id", out var idAttributeValue) ?? false)
+            {
+                return Convert.ToString(idAttributeValue, CultureInfo.InvariantCulture) ?? string.Empty;
+            }
+
+            return FieldIdGenerator.SanitizeHtmlId(NameAttributeValue);
+        }
+    }
+
     /// <inheritdoc />
     public override Task SetParametersAsync(ParameterView parameters)
     {

src/Components/Web/src/Forms/InputCheckbox.cs

@@ -34,17 +34,18 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
         builder.OpenElement(0, "input");
         builder.AddMultipleAttributes(1, AdditionalAttributes);
         builder.AddAttribute(2, "type", "checkbox");
-        builder.AddAttributeIfNotNullOrEmpty(3, "name", NameAttributeValue);
-        builder.AddAttribute(4, "class", CssClass);
-        builder.AddAttribute(5, "checked", BindConverter.FormatValue(CurrentValue));
+        builder.AddAttributeIfNotNullOrEmpty(3, "id", IdAttributeValue);
+        builder.AddAttributeIfNotNullOrEmpty(4, "name", NameAttributeValue);
+        builder.AddAttribute(5, "class", CssClass);
+        builder.AddAttribute(6, "checked", BindConverter.FormatValue(CurrentValue));
         // Include the "value" attribute so that when this is posted by a form, "true"
         // is included in the form fields. That's how <input type="checkbox"> works normally.
         // It sends the "on" value when the checkbox is checked, and nothing otherwise.
-        builder.AddAttribute(6, "value", bool.TrueString);
+        builder.AddAttribute(7, "value", bool.TrueString);
 
-        builder.AddAttribute(7, "onchange", EventCallback.Factory.CreateBinder<bool>(this, __value => CurrentValue = __value, CurrentValue));
+        builder.AddAttribute(8, "onchange", EventCallback.Factory.CreateBinder<bool>(this, __value => CurrentValue = __value, CurrentValue));
         builder.SetUpdatesAttributeName("checked");
-        builder.AddElementReferenceCapture(8, __inputReference => Element = __inputReference);
+        builder.AddElementReferenceCapture(9, __inputReference => Element = __inputReference);
         builder.CloseElement();
     }
 

src/Components/Web/src/Forms/InputDate.cs

@@ -86,12 +86,13 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
         builder.OpenElement(0, "input");
         builder.AddMultipleAttributes(1, AdditionalAttributes);
         builder.AddAttribute(2, "type", _typeAttributeValue);
-        builder.AddAttributeIfNotNullOrEmpty(3, "name", NameAttributeValue);
-        builder.AddAttribute(4, "class", CssClass);
-        builder.AddAttribute(5, "value", CurrentValueAsString);
-        builder.AddAttribute(6, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
+        builder.AddAttributeIfNotNullOrEmpty(3, "id", IdAttributeValue);
+        builder.AddAttributeIfNotNullOrEmpty(4, "name", NameAttributeValue);
+        builder.AddAttribute(5, "class", CssClass);
+        builder.AddAttribute(6, "value", CurrentValueAsString);
+        builder.AddAttribute(7, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
         builder.SetUpdatesAttributeName("value");
-        builder.AddElementReferenceCapture(7, __inputReference => Element = __inputReference);
+        builder.AddElementReferenceCapture(8, __inputReference => Element = __inputReference);
         builder.CloseElement();
     }
 

src/Components/Web/src/Forms/InputHidden.cs

@@ -25,12 +25,13 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
         builder.OpenElement(0, "input");
         builder.AddAttribute(1, "type", "hidden");
         builder.AddMultipleAttributes(2, AdditionalAttributes);
-        builder.AddAttributeIfNotNullOrEmpty(3, "name", NameAttributeValue);
-        builder.AddAttributeIfNotNullOrEmpty(4, "class", CssClass);
-        builder.AddAttribute(5, "value", CurrentValueAsString);
-        builder.AddAttribute(6, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
+        builder.AddAttributeIfNotNullOrEmpty(3, "id", IdAttributeValue);
+        builder.AddAttributeIfNotNullOrEmpty(4, "name", NameAttributeValue);
+        builder.AddAttributeIfNotNullOrEmpty(5, "class", CssClass);
+        builder.AddAttribute(6, "value", CurrentValueAsString);
+        builder.AddAttribute(7, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
         builder.SetUpdatesAttributeName("value");
-        builder.AddElementReferenceCapture(7, __inputReference => Element = __inputReference);
+        builder.AddElementReferenceCapture(8, __inputReference => Element = __inputReference);
         builder.CloseElement();
     }
 

src/Components/Web/src/Forms/InputNumber.cs

@@ -55,12 +55,13 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
         builder.AddAttribute(1, "step", _stepAttributeValue);
         builder.AddAttribute(2, "type", "number");
         builder.AddMultipleAttributes(3, AdditionalAttributes);
-        builder.AddAttributeIfNotNullOrEmpty(4, "name", NameAttributeValue);
-        builder.AddAttributeIfNotNullOrEmpty(5, "class", CssClass);
-        builder.AddAttribute(6, "value", CurrentValueAsString);
-        builder.AddAttribute(7, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
+        builder.AddAttributeIfNotNullOrEmpty(4, "id", IdAttributeValue);
+        builder.AddAttributeIfNotNullOrEmpty(5, "name", NameAttributeValue);
+        builder.AddAttributeIfNotNullOrEmpty(6, "class", CssClass);
+        builder.AddAttribute(7, "value", CurrentValueAsString);
+        builder.AddAttribute(8, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
         builder.SetUpdatesAttributeName("value");
-        builder.AddElementReferenceCapture(8, __inputReference => Element = __inputReference);
+        builder.AddElementReferenceCapture(9, __inputReference => Element = __inputReference);
         builder.CloseElement();
     }
 

src/Components/Web/src/Forms/InputSelect.cs

@@ -40,25 +40,26 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
         builder.OpenElement(0, "select");
         builder.AddMultipleAttributes(1, AdditionalAttributes);
-        builder.AddAttributeIfNotNullOrEmpty(2, "name", NameAttributeValue);
-        builder.AddAttributeIfNotNullOrEmpty(3, "class", CssClass);
-        builder.AddAttribute(4, "multiple", _isMultipleSelect);
+        builder.AddAttributeIfNotNullOrEmpty(2, "id", IdAttributeValue);
+        builder.AddAttributeIfNotNullOrEmpty(3, "name", NameAttributeValue);
+        builder.AddAttributeIfNotNullOrEmpty(4, "class", CssClass);
+        builder.AddAttribute(5, "multiple", _isMultipleSelect);
 
         if (_isMultipleSelect)
         {
-            builder.AddAttribute(5, "value", BindConverter.FormatValue(CurrentValue)?.ToString());
-            builder.AddAttribute(6, "onchange", EventCallback.Factory.CreateBinder<string?[]?>(this, SetCurrentValueAsStringArray, default));
+            builder.AddAttribute(6, "value", BindConverter.FormatValue(CurrentValue)?.ToString());
+            builder.AddAttribute(7, "onchange", EventCallback.Factory.CreateBinder<string?[]?>(this, SetCurrentValueAsStringArray, default));
             builder.SetUpdatesAttributeName("value");
         }
         else
         {
-            builder.AddAttribute(7, "value", CurrentValueAsString);
-            builder.AddAttribute(8, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, default));
+            builder.AddAttribute(8, "value", CurrentValueAsString);
+            builder.AddAttribute(9, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, default));
             builder.SetUpdatesAttributeName("value");
         }
 
-        builder.AddElementReferenceCapture(9, __selectReference => Element = __selectReference);
-        builder.AddContent(10, ChildContent);
+        builder.AddElementReferenceCapture(10, __selectReference => Element = __selectReference);
+        builder.AddContent(11, ChildContent);
         builder.CloseElement();
     }
 

src/Components/Web/src/Forms/InputText.cs

@@ -33,12 +33,13 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
         builder.OpenElement(0, "input");
         builder.AddMultipleAttributes(1, AdditionalAttributes);
-        builder.AddAttributeIfNotNullOrEmpty(2, "name", NameAttributeValue);
-        builder.AddAttributeIfNotNullOrEmpty(3, "class", CssClass);
-        builder.AddAttribute(4, "value", CurrentValueAsString);
-        builder.AddAttribute(5, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
+        builder.AddAttributeIfNotNullOrEmpty(2, "id", IdAttributeValue);
+        builder.AddAttributeIfNotNullOrEmpty(3, "name", NameAttributeValue);
+        builder.AddAttributeIfNotNullOrEmpty(4, "class", CssClass);
+        builder.AddAttribute(5, "value", CurrentValueAsString);
+        builder.AddAttribute(6, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
         builder.SetUpdatesAttributeName("value");
-        builder.AddElementReferenceCapture(6, __inputReference => Element = __inputReference);
+        builder.AddElementReferenceCapture(7, __inputReference => Element = __inputReference);
         builder.CloseElement();
     }
 

src/Components/Web/src/Forms/InputTextArea.cs

@@ -33,12 +33,13 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
         builder.OpenElement(0, "textarea");
         builder.AddMultipleAttributes(1, AdditionalAttributes);
-        builder.AddAttributeIfNotNullOrEmpty(2, "name", NameAttributeValue);
-        builder.AddAttributeIfNotNullOrEmpty(3, "class", CssClass);
-        builder.AddAttribute(4, "value", CurrentValueAsString);
-        builder.AddAttribute(5, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
+        builder.AddAttributeIfNotNullOrEmpty(2, "id", IdAttributeValue);
+        builder.AddAttributeIfNotNullOrEmpty(3, "name", NameAttributeValue);
+        builder.AddAttributeIfNotNullOrEmpty(4, "class", CssClass);
+        builder.AddAttribute(5, "value", CurrentValueAsString);
+        builder.AddAttribute(6, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
         builder.SetUpdatesAttributeName("value");
-        builder.AddElementReferenceCapture(6, __inputReference => Element = __inputReference);
+        builder.AddElementReferenceCapture(7, __inputReference => Element = __inputReference);
         builder.CloseElement();
     }
 

src/Components/Web/src/Forms/Label.cs

@@ -0,0 +1,117 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System.Linq.Expressions;
+using Microsoft.AspNetCore.Components.Rendering;
+
+namespace Microsoft.AspNetCore.Components.Forms;
+
+/// <summary>
+/// Renders a <c>&lt;label&gt;</c> element for a specified field, reading the display name from
+/// <see cref="System.ComponentModel.DataAnnotations.DisplayAttribute"/> or
+/// <see cref="System.ComponentModel.DisplayNameAttribute"/> if present, or falling back to the property name.
+/// </summary>
+/// <remarks>
+/// <para>
+/// The component supports two usage patterns:
+/// </para>
+/// <para>
+/// <strong>Nested (wrapping) pattern:</strong> When <see cref="ChildContent"/> is provided, the label wraps
+/// the input component, providing implicit HTML association without requiring matching for/id attributes.
+/// </para>
+/// <para>
+/// <strong>Non-nested pattern:</strong> When <see cref="ChildContent"/> is not provided, the label renders
+/// with a <c>for</c> attribute matching the field expression. The corresponding input component must have
+/// a matching <c>id</c> attribute (which is automatically generated by input components derived from
+/// <see cref="InputBase{TValue}"/>).
+/// </para>
+/// </remarks>
+/// <typeparam name="TValue">The type of the field.</typeparam>
+public class Label<TValue> : IComponent
+{
+    private RenderHandle _renderHandle;
+    private string? _displayName;
+    private string? _fieldId;
+
+    [CascadingParameter] private HtmlFieldPrefix FieldPrefix { get; set; } = default!;
+
+    /// <summary>
+    /// Specifies the field for which the label should be rendered.
+    /// </summary>
+    [Parameter, EditorRequired]
+    public Expression<Func<TValue>>? For { get; set; }
+
+    /// <summary>
+    /// Gets or sets the child content to be rendered inside the label element.
+    /// Typically this contains an input component that will be implicitly associated with the label.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Gets or sets a collection of additional attributes that will be applied to the label element.
+    /// </summary>
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    /// <inheritdoc />
+    void IComponent.Attach(RenderHandle renderHandle)
+    {
+        _renderHandle = renderHandle;
+    }
+
+    /// <inheritdoc />
+    Task IComponent.SetParametersAsync(ParameterView parameters)
+    {
+        var previousFor = For;
+        var previousChildContent = ChildContent;
+        var previousAdditionalAttributes = AdditionalAttributes;
+
+        parameters.SetParameterProperties(this);
+
+        if (For is null)
+        {
+            throw new InvalidOperationException($"{GetType()} requires a value for the " +
+                $"{nameof(For)} parameter.");
+        }
+
+        // Only recalculate display name and field id if the expression changed
+        var displayNameChanged = false;
+        if (For != previousFor)
+        {
+            var newDisplayName = ExpressionMemberAccessor.GetDisplayName(For);
+            if (newDisplayName != _displayName)
+            {
+                _displayName = newDisplayName;
+                displayNameChanged = true;
+            }
+            _fieldId = FieldIdGenerator.SanitizeHtmlId(
+                FieldPrefix != null ? FieldPrefix.GetFieldName(For) :
+                ExpressionFormatter.FormatLambda(For));
+        }
+
+        var otherParamsChanged = ChildContent != previousChildContent || AdditionalAttributes != previousAdditionalAttributes;
+        if (displayNameChanged || otherParamsChanged)
+        {
+            _renderHandle.Render(BuildRenderTree);
+        }
+
+        return Task.CompletedTask;
+    }
+
+    private void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        builder.OpenElement(0, "label");
+
+        // For non-nested usage (no ChildContent), add 'for' attribute to associate with input by id
+        if (ChildContent is null)
+        {
+            builder.AddAttribute(1, "for", _fieldId);
+        }
+
+        builder.AddMultipleAttributes(2, AdditionalAttributes);
+        builder.AddContent(3, _displayName);
+        builder.AddContent(4, ChildContent);
+        builder.CloseElement();
+    }
+}

src/Components/Web/src/PublicAPI.Unshipped.txt

@@ -74,3 +74,12 @@ Microsoft.AspNetCore.Components.Forms.DisplayName<TValue>
 Microsoft.AspNetCore.Components.Forms.DisplayName<TValue>.DisplayName() -> void
 Microsoft.AspNetCore.Components.Forms.DisplayName<TValue>.For.get -> System.Linq.Expressions.Expression<System.Func<TValue>!>?
 Microsoft.AspNetCore.Components.Forms.DisplayName<TValue>.For.set -> void
+Microsoft.AspNetCore.Components.Forms.InputBase<TValue>.IdAttributeValue.get -> string!
+Microsoft.AspNetCore.Components.Forms.Label<TValue>
+Microsoft.AspNetCore.Components.Forms.Label<TValue>.AdditionalAttributes.get -> System.Collections.Generic.IReadOnlyDictionary<string!, object!>?
+Microsoft.AspNetCore.Components.Forms.Label<TValue>.AdditionalAttributes.set -> void
+Microsoft.AspNetCore.Components.Forms.Label<TValue>.ChildContent.get -> Microsoft.AspNetCore.Components.RenderFragment?
+Microsoft.AspNetCore.Components.Forms.Label<TValue>.ChildContent.set -> void
+Microsoft.AspNetCore.Components.Forms.Label<TValue>.For.get -> System.Linq.Expressions.Expression<System.Func<TValue>!>?
+Microsoft.AspNetCore.Components.Forms.Label<TValue>.For.set -> void
+Microsoft.AspNetCore.Components.Forms.Label<TValue>.Label() -> void