Skip to content

Conversation

@ilonatommy
Copy link
Member

@ilonatommy ilonatommy commented Dec 19, 2025

Add Label component for Blazor Forms

Add Label component that renders accessible labels using wrapping pattern

Description

This PR adds a new Label<TValue> component that renders an HTML <label> element with the display name extracted from [Display] or [DisplayName] attributes, falling back to the property name.

Details in #64791 (comment)

Usage

<Label For="() => model.Name">
    <InputText @bind-Value="model.Name" />
</Label>

Renders:

<label>
    Name
    <input name="model.Name" ... />
</label>

Design

Uses the wrapping pattern where the input is nested inside the label, providing implicit HTML label-input association without requiring for/id attribute matching. This approach:

  • Requires no changes to existing InputBase or Input* components
  • Has no breaking changes
  • Supports AdditionalAttributes for styling (e.g., class="form-label")
  • Supports ChildContent for nesting input components

Fixes #64791

@ilonatommy ilonatommy requested a review from javiercn December 19, 2025 12:44
@ilonatommy ilonatommy self-assigned this Dec 19, 2025
@ilonatommy ilonatommy requested a review from a team as a code owner December 19, 2025 12:44
Copilot AI review requested due to automatic review settings December 19, 2025 12:44
@github-actions github-actions bot added the area-blazor Includes: Blazor, Razor Components label Dec 19, 2025
@ilonatommy ilonatommy added this to the .NET 11 Planning milestone Dec 19, 2025
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR implements a new Label<TValue> component for Blazor Forms that renders an HTML <label> element with display name extraction from [Display] or [DisplayName] attributes. The component uses a wrapping pattern where input components are nested inside the label element, providing implicit HTML label-input association without requiring for/id attribute matching.

Key Changes

  • Added Label<TValue> component that implements IComponent for rendering accessible form labels
  • Component extracts display names using the existing ExpressionMemberAccessor.GetDisplayName utility
  • Comprehensive unit test suite covering various scenarios including attribute precedence, nested properties, and child content rendering

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File Description
src/Components/Web/src/Forms/Label.cs Implements the new Label<TValue> component with parameter handling, display name extraction, and render tree building
src/Components/Web/test/Forms/LabelTest.cs Adds comprehensive unit tests covering display name extraction, attributes, child content, and error scenarios
src/Components/Web/src/PublicAPI.Unshipped.txt Documents the new public API surface for Label<TValue> component

@ilonatommy ilonatommy marked this pull request as draft December 19, 2025 12:56
/// 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; }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happens if user adds for attribute manually?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area-blazor Includes: Blazor, Razor Components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Label in addition to DisplayName

2 participants