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
Name | Description | Type |
---|---|---|
TextFieldType | Text field sub-types | { email: "email", password: "password", tel: "tel", text: "text", url: "url", } |
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 | Allows setting a type or mode of text. | ||
list | public | string | Allows associating a datalist to the element by 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 |
---|---|---|---|---|---|
select | public | Selects all the text in the text field | void | ||
templateChanged | protected | void | FoundationElement | ||
stylesChanged | protected | void | FoundationElement |
Events
Name | Type | Description | Inherited From |
---|---|---|---|
change | Fires a custom 'change' event when the value has changed |
Attributes
Name | Field | Inherited From |
---|---|---|
readonly | readOnly | |
autofocus | ||
placeholder | placeholder | |
type | type | |
list | list | |
maxlength | ||
minlength | ||
pattern | pattern | |
size | ||
spellcheck |
CSS Parts
Name | Description |
---|---|
label | The label |
root | The element wrapping the control, including start and end slots |
control | The text field element |
Slots
Name | Description |
---|---|
start | Content which can be provided before the number field input |
end | Content which can be provided after the number field input |
The default slot for the label |