Text Field

  • Article

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

FluentTextField

<FluentTextField> wraps the <fluent-text-field> element, a web component implementation of a text field leveraging the Fluent UI design system.

Usage

@using Microsoft.Fast.Components.FluentUI
<h4>Default</h4>
<FluentTextField></FluentTextField>
<FluentTextField>Label</FluentTextField>

<h4>Full Width</h4>
<FluentTextField style="width: 100%;"></FluentTextField>

<h4>Placeholder</h4>
<FluentTextField Placeholder="Placeholder"></FluentTextField>

<h4>Required</h4>
<FluentTextField Required="true"></FluentTextField>

<h4>Disabled</h4>
<FluentTextField Disabled="true"></FluentTextField>

<!-- Read only -->
<h4>Read only</h4>
<FluentTextField Readonly="true" Value="Readonly"></FluentTextField>

Example

See the component in action with implementation examples at the Blazor demo site.