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.

Usage

Live Editor

<fast-design-system-provider use-defaults> <fast-text-field appearance="filled" placeholder="user@email.com">Email</fast-text-field> </fast-design-system-provider>

<fast-design-system-provider use-defaults>
    <fast-text-field appearance="filled" placeholder="user@email.com">Email</fast-text-field>
</fast-design-system-provider>

Result

Email

Applying custom styles

import { customElement } from "@microsoft/fast-element";

import { TextFieldTemplate as template, TextField } from "@microsoft/fast-foundation";

import { TextFieldStyles as styles } from "./text-field.styles";

@customElement({

name: "fast-text-field",

template,

styles,

shadowOptions: {

delegatesFocus: true,

},

})

export class FASTTextField extends TextField {}