Fluentui Blazor

Fluent UI Blazor

Use Microsoft.FluentUI.AspNetCore.Components in Blazor applications by selecting the correct setup, provider, binding, service, icon, and theming pattern, then produce paste-ready Razor or C# that follows the library's v4 conventions.

When to invoke

• "Set up Fluent UI Blazor in this app."
• "Why are my FluentDialog or FluentToast calls not showing UI?"
• "Bind FluentSelect, FluentCombobox, FluentListbox, or FluentAutocomplete to objects."
• "Use FluentIcon, FluentDesignTheme, FluentDataGrid, or FluentNavMenu correctly."
• "Migrate this Blazor form to Fluent UI components."

Setup and providers

Component binding patterns

FluentSelect<TOption>, FluentCombobox<TOption>, FluentListbox<TOption>, and FluentAutocomplete<TOption> do not use the <InputSelect> child-<option> model.

<FluentSelect Items="@countries"
              OptionText="@(c => c.Name)"
              OptionValue="@(c => c.Code)"
              @bind-SelectedOption="@selectedCountry"
              Label="Country" />

Do not write this InputSelect pattern:

<FluentSelect @bind-Value="@selectedValue">
    <option value="1">One</option>
</FluentSelect>

For autocomplete:

<FluentAutocomplete TOption="Person"
                   
                    OptionText="@(p => p.FullName)"
                    @bind-SelectedOptions="@selectedPeople"
                    Label="Search people" />

@code {
    private void OnSearch(OptionsSearchEventArgs<Person> args)
    {
        args.Items = allPeople.Where(p =>
            p.FullName.Contains(args.Text, StringComparison.OrdinalIgnoreCase));
    }
}

Dialogs, toasts, forms, icons, and themes

Progressive disclosure and bundled resources

Read bundled references only when the task needs the extra detail:

• references/SETUP.md: setup, service registration, providers, render modes, and static assets.
• references/LAYOUT-AND-NAVIGATION.md: layout, navigation, FluentNavMenu, and shell patterns.
• references/DATAGRID.md: FluentDataGrid data, columns, paging, and virtualization.
• references/THEMING.md: design tokens, FluentDesignTheme, and theme persistence.

Gotchas

• Provider absence is silent: IDialogService, IToastService, tooltip, message bar, and key code services can appear to do nothing when their provider is missing.
• Autocomplete defaults to multiple selection: set Multiple="false" only when a single result is required.
• Design tokens need JS interop: wait for OnAfterRenderAsync before setting them programmatically.
• Icon names are types: Icons.[Variant].[Size].[Name] is the supported pattern.

API vocabulary to preserve

• The package is a NuGet package and auto-loads static assets; no manual tags are needed.

• Provider-backed features are service-based and their providers MUST be in the layout.

• Do not use the WRONG string-based or InputSelect pattern; use strongly-typed icons and object binding.

• Multi-selection uses SelectedOptions; single selection uses SelectedOption.

• @using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons enables icons such as Icons.Filled.Size20.Delete with Color.Error.

• Exact image API: Icon.FromImageUrl("/path/to/image.png").

• FluentEditForm belongs inside FluentWizard; normal forms use EditForm>.

• Dialog examples may include DialogService, DialogService.ShowDialogAsync, ShowEditDialog, SaveAsync, DialogService.ShowConfirmationAsync, DialogService.ShowSuccessAsync, and DialogService.ShowErrorAsync.

• Toast examples may include ToastService, ToastService.ShowSuccess, ToastService.ShowError, ToastService.ShowWarning, and ToastService.ShowInfo.

• Avoid toggling <FluentDialog> visibility for service dialogs.

• Preserve exact tokens @using and multi-selection when explaining icon imports and multi-select binding.

## Fluent UI Blazor result

**Status:** ready | needs provider | blocked
**Target:** <component, file, or feature>

### Implementation
```razor
<paste-ready Razor or C# snippet>

## Quality gate

- [ ] No manual core Fluent UI `<script>` or `<link>` tags were added.
- [ ] `AddFluentUIComponents` and the required providers are present when service-backed components are used.
- [ ] Object list components use `Items`, `OptionText`, `OptionValue`, and selected option bindings instead of child `<option>` markup.
- [ ] Dialogs use `IDialogService` and `IDialogContentComponent<TData>` when service-backed.
- [ ] Icons use the typed `Microsoft.FluentUI.AspNetCore.Components.Icons` package or `Icon.FromImageUrl`.
- [ ] Theme token changes run after render, not in `OnInitialized`.
- [ ] Any referenced bundled file exists and was read only when needed.