-
Notifications
You must be signed in to change notification settings - Fork 10.5k
Implement nested Label for DisplayName
#64821
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this 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 implementsIComponentfor rendering accessible form labels - Component extracts display names using the existing
ExpressionMemberAccessor.GetDisplayNameutility - 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 |
| /// 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; } |
There was a problem hiding this comment.
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?
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
Renders:
Design
Uses the wrapping pattern where the input is nested inside the label, providing implicit HTML label-input association without requiring
for/idattribute matching. This approach:InputBaseorInput*componentsAdditionalAttributesfor styling (e.g.,class="form-label")ChildContentfor nesting input componentsFixes #64791