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

<fast-text-field appearance="filled" placeholder="user@email.com">Email</fast-text-field>

<fast-text-field appearance="filled" placeholder="user@email.com">Email</fast-text-field>

Result

Loading...

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.

API

class: TextField

Superclass

Name	Module	Package
FormAssociatedTextField	/src/text-field/text-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.
placeholder	public	string		Sets the placeholder value of the element, generally used to provide a hint to the user.
type	public	TextFieldType or "email" or "password" or "tel" or "text" or "url"		Allows setting a type or mode of text.
list	public	string		Allows associating a datalist to the element by {@link 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.
pattern	public	string		A regular expression that the value must match to pass validation.
size	public	number		Sets the width of the element to a specified number of characters.
spellcheck	public	boolean		Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
proxy					FormAssociatedTextField
$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
templateChanged	protected			void	FoundationElement
stylesChanged	protected			void	FoundationElement

Attributes

Name	Field	Inherited From
readonly	readOnly
	autofocus
placeholder	placeholder
type	type
list	list
	maxlength
	minlength
pattern	pattern
	size
	spellcheck

---

class: DelegatesARIATextbox

---

Additional resources

• Component explorer examples
• Component technical specification