Fluent UI Blazor forms overview
A lot of the components in this library are specifically made to get input from users by means of forms. These components almost all derive from
FluentInputBase<TValue>, our generic abstract base class for input handling components. Let's first dive a bit deeper
into this base component and its derivates.
Note: When using the input components in SSR mode, be sure to assing a value to the
Nameproperty otherwise the enhanced form functionalty will not work. In contrast to the standard Blazor input components a name is not automatically being generated. Also, theNameneeds to be prefixed with the model name (i.e. `Model.Username`).
Input components and forms
FluentInputBase<TValue>
FluentInputBase<TValue> is a generic class making it possible for this base class to handle different types of data.
It is also an abstract class so you can not create or use a FluentInputBase<TValue> on a page or in another component.
Because it is a base class, it exposes the parameters, event callbacks and methods below in every derived component.
These parameters are also shown in the component overviews in the rest of the documentation pages
Parameters
Name | Type | Default | Description |
|---|---|---|---|
AriaLabel | string? | null | Gets or sets the text used on aria-label attribute. |
AutoFocus | bool | false | Determines if the element should receive document focus on page load. |
ReadOnly | bool | false | When true, the control will be immutable by user interaction. readonly HTML attribute for more information. |
Id | string? | Gets or sets the id attribute of the element. Used for label association. | |
Disabled | bool | false | Disables the form control, ensuring it doesn't participate in form submission. |
Name | string? | null | Gets or sets the name of the element. Allows access by name from the associated form. ⚠️ This value needs to be set manually for SSR scenarios to work correctly. |
Required | bool | false | Gets or sets whether the element needs to have a value |
Value | TValue? | null | Gets or sets the value of the input. This should be used with two-way binding. |
DisplayName | string? | null | Gets or sets the display name for this field. |
ValueExpression | Expression<Func<TValue>>? | null | Gets or sets an expression that identifies the bound value. |
Placeholder | string? | null | Gets or sets the short hint displayed in the input before the user enters a value. |
Label | string? | null | Gets or sets the text displayed just above or in front of the component. |
LabelTemplate | RenderFragment? | null | Gets or sets the text displayed just above or in front of the component. |
EventCallbacks
Name | Type | Description |
|---|---|---|
ValueChanged | EventCallback<TValue> | Gets or sets a callback that updates the bound value |
Methods
Name | Parameters | Description |
|---|---|---|
FocusAsync | | Exposes the FocusAsync() method. |
FocusAsync | bool preventScroll | Exposes the elements FocusAsync(bool preventScroll) method. |
Derived components
The list below sums up the derived components and the way they use the FluentInputBase base class. Every derived component has its
own specific parameters, event callbacks and methods. These are documented on the component pages.
FluentCheckbox:FluentInputBase<bool>FluentNumberField<TValue>:FluentInputBase<TValue>FluentRadioGroup:FluentInputBase<string?>FluentSearch:FluentInputBase<string?>FluentSlider:FluentInputBase<TValue>FluentSwitch:FluentInputBase<bool>;FluentTextArea:FluentInputBase<string?>;FluentTextField:FluentInputBase<string?>FluentTimePicker:FluentInputBase<DateTime?>
Label and LabelTemplate
Every derived component supports the Label parameter. The contents of this parameter is of type string and cannot contain any markup.
The value will be used to create a label HTML element for the input component. It is usually displayed just above the input field.
For a checkbox it is displayed after the input field, for a switch it is displayed in front of it.
If you would like to apply more complex markup for the label, you can use the LabelTemplate parameter. As this has a type of
RenderFragment?, it can contain virtuall anything.
When neither Label nor LabelTemplate parameters are set, you can create your own label HTML elements.
Binding
The Fluent UI input components all support binding, just like the standard Blazor input components do. See the documentation on the Learn site for more information.
Validation
The Fluent UI input components work with validation in the same way the standard Blazor input components do. We provide 2 extra components to make it possible to show validation messages which follow the Fluent Design guidelines:
FluentValidationSummaryFluentValidationMessage
Layout
In principal a label is shown right above the actual input field. You can use 3 ways to layout your forms:
- Use the FluentStack component
- Use the FluentGrid and FluentGridItem components
- Use your own HTML elements and CSS classes
FluentEditForm
The FluentEditForm inherits from the standard EditForm. The only thing it does is that it add a cascading parameter that contains a FluentWizardStep we use to register a form inside a FluentWizard.
If you are not using a FluentWizard in your form, there is no need/use to use the FluentEditForm
Example
Basic Fluent UI form
FluentValidationSummary and FluentValidationMessage to give feedback on the state of the form. It
uses the same Starship model as the standard docs and a DataAnnotationsValidator to use the data annotations set in the model.
Not all of the library's input components are used in this form. No data is actually being stored or saved.
Starfleet Starship Database
This form uses the Fluent UI input components. It uses a DataAnnotationsValidator, a FluentValidationSummary
and FluentValidationMessages.