Text Field

An implementation of a text field as a form-connected web-component. The fluent-text-field supports two visual appearances, outline and filled, with the control defaulting to the outline appearance.

Note

This component filters out slotted text nodes that are only white space to properly hide the label when the label is not in use.

fluent-text-field

Setup

import {
    provideFluentDesignSystem,
    fluentTextField
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentTextField()
    );

Example

Please see the Blazor documentation and demo site for more information.