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
Loading...

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.

API

class: NumberField

Superclass

NameModulePackage
FormAssociatedNumberField/src/number-field/number-field.form-associated.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
readOnlypublicbooleanWhen true, the control will be immutable by user interaction. See readonly HTML attribute for more information.
autofocuspublicbooleanIndicates that this element should get focus after the page finishes loading. See autofocus HTML attribute for more information.
hideSteppublicbooleanfalseWhen true, spin buttons will not be rendered
placeholderpublicstringSets the placeholder value of the element, generally used to provide a hint to the user.
listpublicstringAllows associating a datalist to the element by {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/id}.
maxlengthpublicnumberThe maximum number of characters a user can enter.
minlengthpublicnumberThe minimum number of characters a user can enter.
sizepublicnumberSets the width of the element to a specified number of characters.
steppublicnumber1Amount to increment or decrement the value by
maxpublicnumberThe maximum the value can be
minpublicnumberThe minimum the value can be
valueAsNumberpublicnumberThe value property, typed as a number.
proxyFormAssociatedNumberField
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
stepUppublicIncrements the value using the step valuevoid
stepDownpublicDecrements the value using the step valuevoid
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes

NameFieldInherited From
readonlyreadOnly
autofocus
hide-stephideStep
placeholderplaceholder
listlist
maxlength
minlength
size
step
max
min

Additional resources