Skip to main content

fast-text-field

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

note

This component filters out slotted text nodes that are only white space to properly hide the label when the label is not in use.

Setup#

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

Usage#

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

Create your own design#

import {    TextField,    textFieldTemplate as template,} from "@microsoft/fast-foundation";import { textFieldStyles as styles } from "./my-text-field.styles";

export const myTextField = TextField.compose({    baseName: "text-field",    template,    styles,    shadowOptions: {        delegatesFocus: true,    },});
note

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

Additional resources#