Skip to content

[11.0 P1] Forms on Blazor support DisplayName attribute #36438

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.

Sign up for GitHub

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

Draft
ilonatommy wants to merge 7 commits into
base: main
Choose a base branch
from
+84 −18
Draft

[11.0 P1] Forms on Blazor support DisplayName attribute #36438

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
594f7bc
Proposal of `DisplayNameFor`.
ilonatommy Dec 4, 2025
fc9e38d
Update aspnetcore/blazor/forms/input-components.md
ilonatommy Dec 5, 2025
fa9a4ee
Update aspnetcore/blazor/forms/input-components.md
ilonatommy Dec 5, 2025
2ba526f
Fix order.
ilonatommy Dec 5, 2025
908c71f
Update aspnetcore/blazor/forms/input-components.md
ilonatommy Dec 5, 2025
f9a127c
Update aspnetcore/blazor/forms/input-components.md
ilonatommy Dec 5, 2025
ab02389
Update: add labels.
ilonatommy Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 84 additions & 18 deletions aspnetcore/blazor/forms/input-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ The components in the table are also supported outside of a form in Razor compon
| <xref:Microsoft.AspNetCore.Components.Forms.InputSelect%601> | `<select>` |
| <xref:Microsoft.AspNetCore.Components.Forms.InputText> | `<input>` |
| <xref:Microsoft.AspNetCore.Components.Forms.InputTextArea> | `<textarea>` |
| [`Label<TValue>`](#label-component) (.NET 11 or later) | `<label>` |

For more information on the <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component, see <xref:blazor/file-uploads>.

Expand Down Expand Up @@ -458,28 +459,93 @@ The validation summary displays the friendly name when the field's value is inva

> The Production Date field must be a date.

<!-- UPDATE 11.0 The feature has been backlogged.
https://github.com/dotnet/aspnetcore/issues/49147
:::moniker-end

> [!NOTE]
> Alternatively, the [`[Display]` attribute](xref:System.ComponentModel.DataAnnotations.DisplayAttribute) on the model class property is supported:
>
> ```csharp
> [Required, Display(Name = "Production Date")]
> public DateTime ProductionDate { get; set; }
> ```
>
> [`[DisplayName]` attribute](xref:System.ComponentModel.DisplayNameAttribute) is also supported:
>
> ```csharp
> [Required, DisplayName("Production Date")]
> public DateTime ProductionDate { get; set; }
> ```
>
> Between the two approaches, the `[Display]` attribute is recommended, which makes additional properties available. The `[Display]` attribute also enables assigning a resource type for localization.
:::moniker range=">= aspnetcore-11.0"

<!-- UPDATE 11.0 - API cross-link

<xref:Microsoft.AspNetCore.Components.Forms.DisplayName%601>
-->
The `DisplayName` component can be used to display property names from metadata attributes

```csharp
[Required, DisplayName("Production Date")]
public DateTime ProductionDate { get; set; }
```

The [`[Display]` attribute](xref:System.ComponentModel.DataAnnotations.DisplayAttribute) on the model class property is supported:

```csharp
[Required, Display(Name = "Production Date")]
public DateTime ProductionDate { get; set; }
```

Between the two approaches, the `[Display]` attribute is recommended, which makes additional properties available. The `[Display]` attribute also enables assigning a resource type for localization. When both attributes are present, `[Display]` takes precedence over `[DisplayName]`. If neither attribute is present, the component falls back to the property name.

Use the `DisplayName` component in labels or table headers:

```razor
<label>
<DisplayName For="@(() => Model!.ProductionDate)" />
<InputDate @bind-Value="Model!.ProductionDate" />
</label>
```

:::moniker-end

:::moniker range=">= aspnetcore-11.0"

## `Label` component

<!-- UPDATE 11.0 - API cross-link

<xref:Microsoft.AspNetCore.Components.Forms.Label%601>
-->

The `Label` component renders a `<label>` element that automatically extracts the display name from a model property using `[Display]` or `[DisplayName]` attributes. This simplifies form creation by eliminating the need to manually specify label text.

### Nested pattern

The nested pattern wraps the input component inside the label:

```razor
<Label For="() => Model!.ProductionDate">
<InputDate @bind-Value="Model!.ProductionDate" />
</Label>
```

This renders:

```html
<label>Production Date<input type="date" ... /></label>
```

### Non-nested pattern

For accessibility requirements or styling flexibility, use the non-nested pattern where the label's `for` attribute references the input's `id`:

```razor
<Label For="() => Model!.ProductionDate" />
<InputDate @bind-Value="Model!.ProductionDate" />
```

This renders:

```html
<label for="Model_ProductionDate">Production Date</label>
<input id="Model_ProductionDate" type="date" ... />
```

The `id` attribute is automatically sanitized to create a valid HTML id (dots are replaced with underscores to avoid CSS selector conflicts).

Input components automatically generate an `id` attribute based on the bound expression. If an explicit `id` is provided, it takes precedence:

```razor
<Label For="() => Model!.ProductionDate" for="prod-date" />
<InputDate @bind-Value="Model!.ProductionDate" id="prod-date" />
```

:::moniker-end

## Error message template support
Expand Down