Number Field

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

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

Note

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