Announcing Fluent UI Blazor v5 RC5 — AreaChart, Master/Detail DataGrid, Overflow, and More

We are excited to announce the fifth Release Candidate of the Fluent UI Blazor v5 library! Since RC4, the team has focused on the final major scenarios ahead of the final release: a new FluentAreaChart, master/detail rows for FluentDataGrid, an overhaul of FluentOverflow, navigation that is better integrated with Blazor, and numerous performance, accessibility, and static rendering improvements.

This RC also updates Fluent UI Web Components and System Icons, strengthens form components, improves FluentLayout, and fixes several edge cases involving virtualization, dialogs, RTL mode, and keyboard events.

Visit our demo website.

New Chart: FluentAreaChart

The Microsoft.FluentUI.AspNetCore.Components.Charts package, introduced with RC4, now includes FluentAreaChart. This chart represents the evolution of one or more series as curves with a filled area beneath them.

This contribution also introduces shared infrastructure for axes, legends, tooltips, and dimensions. The Donut, Funnel, Horizontal Bar, and Gantt components benefit from it as well, making chart behavior and appearance more consistent.

Installation:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Charts --prerelease

DataGrid: Master/Detail Rows

The main new feature in FluentDataGrid is support for expandable detail rows. A row can now display additional content directly beneath its cells: an edit form, history, a nested table, or any other Razor view.

The content is provided through a RowDetails template. Expanding and collapsing can be triggered from the grid or controlled programmatically. A dedicated example also shows how to load details on demand, display a progress indicator, and cache the result.

The HasRowDetails parameter determines, row by row, whether the expand button should be displayed. This distinction is useful when only some entries have additional information.

DataGrid: Performance, Virtualization, and Hierarchies

Several changes make the grid faster and more robust:

  • Lighter non-interactive cells (#5023) — when Fluent interactivity is not required, the grid renders a native HTML cell. This optimization significantly reduces allocations and rendering costs for large grids.
  • Virtualization and data loading (#4972) — initial loading is better synchronized with Virtualize, and canceled requests are handled more cleanly, preventing duplicate or obsolete loads.
  • Hierarchical data sorting (#4982) — sorting now preserves the parent/child structure instead of flattening the hierarchy.
  • Use in a FluentDrawer or FluentDialog (#4983) — fixes column menus briefly flashing while events are being processed.
  • Safer reordering interop (#5066) — JavaScript initialization is scheduled only when ReorderableColumns is enabled, and the JS entry points now tolerate a detached or uninitialized grid. In particular, this prevents a Blazor Server circuit from breaking during a re-render.

The grid also uses more HTML attributes to express its states and behaviors instead of internal CSS classes (#5075). Migration warning: if your application overrides the DataGrid’s former internal classes, those CSS selectors will need to be updated.

Finally, the column documentation and examples have been reorganized to make the component’s many capabilities easier to discover (#5034).

FluentOverflow Overhaul

FluentOverflow is now based on the <fluent-overflow> Web Component (#4961). Overflow calculations happen directly in the browser, with fewer round trips between JavaScript and .NET during resizing. FluentAppBar also uses this new mechanism.

The new implementation adds:

  • MaxRenderedItems, to limit the number of items returned in the overflow menu while preserving the total count;
  • fixed items, with the fixed="fixed" and fixed="ellipsis" modes;
  • an overflow event that provides, among other things, the number of hidden items and the index of the first affected item.

This overhaul includes breaking changes:

  • MoreButtonTemplate becomes MoreTemplate;
  • the former FluentOverflowItem component is removed in favor of attributes placed directly on child elements.

Consult the migration guide before updating a custom action bar or FluentAppBar.

FluentAnchorButton and FluentLink now use Blazor navigation for same-origin internal URLs. Navigating within the application therefore no longer automatically causes a full page reload.

The new ForceLoad parameter explicitly restores the browser’s native behavior:

<FluentLink Href="/orders">Orders</FluentLink>

<FluentAnchorButton Href="/reports" ForceLoad="true">
    Reload report
</FluentAnchorButton>

When ForceLoad is false, its default value, Blazor’s navigation features are preferred. With true, the resource is reloaded from the server.

In the same spirit, a disabled FluentNavItem no longer renders its href attribute. This prevents the item from being activated accidentally with the keyboard or by assistive technology.

The new RenderWhen parameter on FluentMenu accepts a predicate and defers creating the menu until it returns true. This avoids unnecessarily filling the DOM with large menus that may never be opened.

<FluentMenu Trigger="menu-trigger"
            RenderWhen="@(() => RenderMenu)">
    <FluentMenuList>
        <FluentMenuItem>Edit</FluentMenuItem>
        <FluentMenuItem>Archive</FluentMenuItem>
    </FluentMenuList>
</FluentMenu>

@code {
    private bool RenderMenu { get; set; }
}

When the condition becomes true, the menu is rendered and then opened. This approach is particularly useful in lists that contain a context menu for every row.

Inherited Default Values

The DefaultValues mechanism can now apply configuration registered for a base class to its derived components. A specific value declared for the concrete component still takes precedence.

builder.Services.AddFluentUIComponents(configuration =>
{
    configuration.DefaultValues
        .For<FluentChartBase>()
        .Set(component => component.RoundedCorners, true);

    configuration.DefaultValues
        .For<FluentDonutChart>()
        .Set(component => component.RoundedCorners, false);
});

Validation also rejects non-writable properties and incompatible values earlier, making configuration errors more explicit at startup.

Forms and Validation

Form fields receive a series of functional and visual improvements:

  • Internal control styling (#5061) — FluentTextInput, FluentTextArea, and FluentNumberInput expose ControlStyle, which applies a style to the .control element in the Shadow DOM. In particular, the FluentTextInput.HidePasswordToggle constant can hide the native password reveal button.
  • Accessible labels for text fields (#5071) — FluentField passes its label as an aria-label to the internal control of FluentTextInput, FluentTextArea, and FluentNumberInput. Required fields also include a localized indication.
  • FluentSelect accessibility (#5074) — the internal control now receives its accessible name and aria-expanded state, improving how screen readers announce it.
  • FluentRadioGroup and validation (#5063) — value changes correctly notify the EditContext; unwanted radio button margins and the validation outline have also been fixed.
  • Multiple validation messages (#5016) — multiple errors associated with the same field no longer overlap.
  • FluentTimePicker width (#5062) — the internal input now occupies the full available width. However, the Web Component retains a minimum width of 160 pixels.

The browser’s native HTML validation is now also optional (#4989). By default, an application can keep the Blazor and Fluent UI validation experience without also displaying the browser’s native validation bubbles; these can be re-enabled through the library’s global configuration when the scenario requires them.

Finally, FluentAutocomplete no longer triggers associated callbacks, including @bind:after, twice after a selection (#4981). The component now ignores the duplicate event produced when Blazor reapplies an unchanged selection to the DOM.

Accessibility

Button components now have an explicit role suited to their function (#5073). FluentButton, FluentAnchorButton, FluentCompoundButton, and several trigger buttons thus expose role="button" or role="link" as appropriate.

The DataGrid also receives several accessibility adjustments (#5029): an improved ARIA labeling strategy, more precise attributes on menus, and support for header tooltips. These changes make the grid easier to understand with a keyboard and screen reader.

FluentLayout: Static Rendering and Printing

FluentLayout now detects its mobile breakpoint directly in the markup and initializes itself automatically, including during static rendering (#5054). This change reduces reliance on interop calls at startup and also provides the hamburger dialog ID as a cascading value. Work on FluentNav in fully static rendering continues separately.

Printing is also fixed (#5070). An @media print stylesheet hides navigation areas, the header, footer, and side panels, then places the main content back into a flow suitable for printing across multiple pages.

The header’s CSS height is now recalculated correctly when layout elements register (#4977), ensuring a reliable value for --layout-header-height.

MessageBar, Popover, Drawer, and Text

  • FluentMessageBar — ResultTiming (#4994): the caller can choose whether the asynchronous result is produced when the bar becomes visible or only when it is closed. Non-blocking helpers avoid waiting for it to close when this is unnecessary.
  • FluentPopover in RTL mode (#5014): alignment calculations now account for right-to-left direction.
  • Medium-sized FluentDrawer (#4988): the style corresponding to the Medium size is now applied correctly.
  • FluentText.As (#5017): the parameter is refocused on its semantic role and allows choosing the HTML element rendered for the text while retaining the Fluent component as the host.
  • Project templates (#5015): several reported issues in the Blazor Web App templates have been fixed, and the examples have been aligned with the v5 APIs.

More Robust Keyboard Events

Synthetic or partial keyboard events can contain missing JavaScript properties, while their .NET equivalents do not always accept null. SafeKeyboardEvent now normalizes this data before sending it to .NET (#5051).

Missing strings, booleans, and numbers receive a safe value. This prevents deserialization exceptions encountered in particular with some autofill mechanisms or script-created events, without changing the behavior of preventDefault and stopPropagation.

Web Components, Hybrid Applications, and Dependencies

  • Fluent UI Web Components 3.0.0 (#4984), then 3.0.2 (#5067) — RC5 includes the latest fixes from the Web Components v3 foundation.
  • Hybrid startup hooks (#5079) — the beforeStart and afterStarted functions are exported again for BlazorWebView hosts, including .NET MAUI, WPF, and Windows Forms.
  • Model Context Protocol SDK 2.0.0 (#5055) — the documentation MCP server is aligned with version 2 of the SDK and the recent registry schema. This change concerns tooling, not the components distributed to applications.

Fluent UI System Icons 1.1.334

The icon classes have been regenerated from Fluent UI System Icons 1.1.334 (#5083). This update brings new variants and sizes, notably for the ChatMultiple, CircleHint, Clover, Incognito, Sparkle, Weather, Rotate, Trend, Ticket, and Wifi families, while also updating the paths of several existing icons.

Documentation, Quality, and Demo Site

  • The documentation site displays a dynamic NewsBar for important announcements, with notifications that users can dismiss (#4973).
  • The documentation and its presentation have been cleaned up, including the migration guide, links, and formatting (#4990).
  • The Charts package has expanded unit test coverage and shared test infrastructure (#4978).

Try It Now

Resource Link
NuGet Microsoft.FluentUI.AspNetCore.Components --prerelease
Charts Microsoft.FluentUI.AspNetCore.Components.Charts --prerelease
OData adapter Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapter --prerelease
EF adapter Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter --prerelease
Templates Microsoft.FluentUI.AspNetCore.Templates --prerelease
Documentation https://v5.fluentui-blazor.net
GitHub https://github.com/microsoft/fluentui-blazor
Migration Guide Migration to v5

This fifth Release Candidate consolidates v5 around concrete scenarios: rich and performant grids, accessible components, seamless navigation, and reliable rendering across the different Blazor modes. If you use FluentOverflow or customize the DataGrid’s internal CSS classes, take the time to review the migration changes before updating.

As always, feel free to open issues on GitHub and contribute. A huge thank you to everyone who tested RC4, reported issues, and submitted pull requests.

Happy Blazoring!