Skip to main content
Version: 1.x

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
<fast-number-field appearance="filled" min="0" max="10"></fast-number-field>
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 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
selectpublicSelects all the text in the number fieldvoid
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Events

NameTypeDescriptionInherited From
inputFires a custom 'input' event when the value has changed
changeFires a custom 'change' event when the value has changed

Attributes

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

CSS Parts

NameDescription
labelThe label
rootThe element wrapping the control, including start and end slots
controlThe element representing the input
controlsThe step up and step down controls
step-upThe step up control
step-downThe step down control

Slots

NameDescription
startContent which can be provided before the number field input
endContent which can be provided after the number field input
The default slot for the label
step-up-glyphThe glyph for the step up control
step-down-glyphThe glyph for the step down control

Additional resources