fast-text-area

An implementation of an HTML textarea element as a form-connected web-component. The fast-text-area supports two visual appearances, outline and filled, with the control defaulting to the outline appearance.

Setup

import {
    provideFASTDesignSystem,
    fastTextArea
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastTextArea()
    );

Usage

Live Editor

<fast-text-area placeholder="Describe your experience">How was your stay?</fast-text-area>

<fast-text-area placeholder="Describe your experience">How was your stay?</fast-text-area>

Result

Loading...

Create your own design

import {
    TextArea,
    textAreaTemplate as template,
} from "@microsoft/fast-foundation";
import { textAreaStyles as styles } from "./my-text-area.styles";

export const myTextArea = TextArea.compose({
    baseName: "text-area",
    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
TextAreaResize	Resize mode for a TextArea	{ none: "none", both: "both", horizontal: "horizontal", vertical: "vertical", }

---

class: TextArea

Superclass

Name	Module	Package
FormAssociatedTextArea	/src/text-area/text-area.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.
resize	public	TextAreaResize		The resize mode of the element.
autofocus	public	boolean		Indicates that this element should get focus after the page finishes loading.
formId	public	string		The id of the form the element is associated to
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.
name	public	string		The name of the element.
placeholder	public	string		Sets the placeholder value of the element, generally used to provide a hint to the user.
cols	public	number	20	Sizes the element horizontally by a number of character columns.
rows	public	number		Sizes the element vertically by a number of character rows.
spellcheck	public	boolean		Sets if the element is eligible for spell checking but the UA.
proxy					FormAssociatedTextArea
$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 area		void
templateChanged	protected			void	FoundationElement
stylesChanged	protected			void	FoundationElement

Events

Name	Type	Description	Inherited From
change		Emits a custom 'change' event when the textarea emits a change event

Attributes

Name	Field	Inherited From
	readOnly
resize	resize
	autofocus
form	formId
list	list
	maxlength
	minlength
name	name
placeholder	placeholder
	cols
	rows
	spellcheck

CSS Parts

Name	Description
label	The label
root	The element wrapping the control
control	The textarea element

Slots

Name	Description
	The default slot for the label

---

Additional resources

• Component explorer examples
• Component technical specification