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
Name | Module | Package |
---|---|---|
FormAssociatedNumberField | /src/number-field/number-field.form-associated.js |
Fields
Name | Privacy | Type | Default | Description | Inherited From |
---|---|---|---|---|---|
readOnly | public | boolean | When true, the control will be immutable by user interaction. See readonly HTML attribute for more information. | ||
autofocus | public | boolean | Indicates that this element should get focus after the page finishes loading. See autofocus HTML attribute for more information. | ||
hideStep | public | boolean | false | When true, spin buttons will not be rendered | |
placeholder | public | string | Sets the placeholder value of the element, generally used to provide a hint to the user. | ||
list | public | string | Allows associating a datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id. | ||
maxlength | public | number | The maximum number of characters a user can enter. | ||
minlength | public | number | The minimum number of characters a user can enter. | ||
size | public | number | Sets the width of the element to a specified number of characters. | ||
step | public | number | 1 | Amount to increment or decrement the value by | |
max | public | number | The maximum the value can be | ||
min | public | number | The minimum the value can be | ||
valueAsNumber | public | number | The value property, typed as a number. | ||
proxy | FormAssociatedNumberField | ||||
$presentation | public | ComponentPresentation or null | A property which resolves the ComponentPresentation instance for the current component. | FoundationElement | |
template | public | ElementViewTemplate or void or null | Sets 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 | |
styles | public | ElementStyles or void or null | Sets 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
Name | Privacy | Description | Parameters | Return | Inherited From |
---|---|---|---|---|---|
stepUp | public | Increments the value using the step value | void | ||
stepDown | public | Decrements the value using the step value | void | ||
select | public | Selects all the text in the number field | void | ||
templateChanged | protected | void | FoundationElement | ||
stylesChanged | protected | void | FoundationElement |
Events
Name | Type | Description | Inherited From |
---|---|---|---|
input | Fires a custom 'input' event when the value has changed | ||
change | Fires a custom 'change' event when the value has changed |
Attributes
Name | Field | Inherited From |
---|---|---|
readonly | readOnly | |
autofocus | ||
hide-step | hideStep | |
placeholder | placeholder | |
list | list | |
maxlength | ||
minlength | ||
size | ||
step | ||
max | ||
min |
CSS Parts
Name | Description |
---|---|
label | The label |
root | The element wrapping the control, including start and end slots |
control | The element representing the input |
controls | The step up and step down controls |
step-up | The step up control |
step-down | The step down control |
Slots
Name | Description |
---|---|
start | Content which can be provided before the number field input |
end | Content which can be provided after the number field input |
The default slot for the label | |
step-up-glyph | The glyph for the step up control |
step-down-glyph | The glyph for the step down control |