Number Field

  • Article

fluent-number-field

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

Setup

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

provideFluentDesignSystem()
    .register(
        fluentNumberField()
    );

Customizing glyphs

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

provideFluentDesignSystem()
    .register(
        fluentNumberField({
            stepDownGlyph: `...your step down glyph...`,
            stepUpGlyph: `...your setup up glyph...`,
        })
    );

Example

FluentNumberField

An implementation of a text field. The <FluentNumberField> supports two visual appearances, outline and filled, with the control defaulting to the outline appearance.

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

Usage

@using Microsoft.Fast.Components.FluentUI
<FluentNumberField @bind-Value="exampleInt">Integer</FluentNumberField>

@code{
    int exampleInt { get; set; } = 123;
}

Example

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

Note

This component is built with the expectation that focus is delegated to the input element rendered into the shadow DOM.