Skip to main content

fast-number-field

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

Setup#

Basic Setup#

import {    provideFASTDesignSystem,    fastNumberField} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastNumberField()    );

Customizing Glyphs#

import {    provideFASTDesignSystem,    fastNumberField} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastNumberField({            stepDownGlyph: `...your step down glyph...`,            stepUpGlyph: `...your setup up glyph...`,        })    );

Usage#

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Create your own design#

import {    NumberField,    NumberFieldOptions,    numberFieldTemplate as template,} from "@microsoft/fast-foundation";import { numberFieldStyles as styles } from "./my-number-field.styles";
export const myNumberField = NumberField.compose<NumberFieldOptions>({    baseName: "number-field",    styles,    template,    shadowOptions: {        delegatesFocus: true,    },    stepDownGlyph: `...default step down glyph...`,    stepUpGlyph: `...default setup up glyph...`,});
note

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

Additional resources#