Skip to main content


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.


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


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


Live Editor
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,    },});

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

Additional resources#