Version: 1.x

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>

Result

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

Setup​

Usage​

Create your own design​

API​

Variables​

class: TextArea​

Superclass​

Fields​

Methods​

Events​

Attributes​

CSS Parts​

Slots​

Additional resources​