Skip to main content
Version: 1.x

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>
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

Variables

NameDescriptionType
TextFieldTypeText field sub-types{ email: "email", password: "password", tel: "tel", text: "text", url: "url", }

class: TextField

Superclass

NameModulePackage
FormAssociatedTextField/src/text-field/text-field.form-associated.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
readOnlypublicbooleanWhen true, the control will be immutable by user interaction. See readonly HTML attribute for more information.
autofocuspublicbooleanIndicates that this element should get focus after the page finishes loading. See autofocus HTML attribute for more information.
placeholderpublicstringSets the placeholder value of the element, generally used to provide a hint to the user.
typepublicTextFieldTypeAllows setting a type or mode of text.
listpublicstringAllows associating a datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id.
maxlengthpublicnumberThe maximum number of characters a user can enter.
minlengthpublicnumberThe minimum number of characters a user can enter.
patternpublicstringA regular expression that the value must match to pass validation.
sizepublicnumberSets the width of the element to a specified number of characters.
spellcheckpublicbooleanControls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
proxyFormAssociatedTextField
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets 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
stylespublicElementStyles or void or nullSets 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

NamePrivacyDescriptionParametersReturnInherited From
selectpublicSelects all the text in the text fieldvoid
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Events

NameTypeDescriptionInherited From
changeFires a custom 'change' event when the value has changed

Attributes

NameFieldInherited From
readonlyreadOnly
autofocus
placeholderplaceholder
typetype
listlist
maxlength
minlength
patternpattern
size
spellcheck

CSS Parts

NameDescription
labelThe label
rootThe element wrapping the control, including start and end slots
controlThe text field element

Slots

NameDescription
startContent which can be provided before the number field input
endContent which can be provided after the number field input
The default slot for the label

class: DelegatesARIATextbox


Additional resources