@finastra/textarea NPM

Textarea

Text areas let users enter and edit text.

It extends Material web's mwc-textarea-base.

Usage

Import

npm i @finastra/textarea

import '@finastra/textarea';
...
<fds-textarea label="description"></fds-textarea>

API

Properties

Property	Attribute	Modifiers	Type	Default	Description
`autoValidate`			`boolean`
`autocapitalize`			`string`
`charCounter`	`charCounter`		`boolean \\| "external" \\| "internal"`	false	Requires `maxLength`to be set. Display character counter with max length. Textareas may display an "external" or "internal" charCounter. When `true`, textareas display an external character counter by default.
`cols`			`number`
`disabled`	`disabled`		`boolean`	false	Disabled state for the component. When `disabled` is set to `true`, thecomponent will not be added to form submission.
`endAligned`			`boolean`
`helper`	`helper`		`string`	"helper"	Helper text to display below the input. Display default only when focused.
`helperPersistent`			`boolean`
`icon`			`string`
`iconTrailing`			`string`
`inputMode`			`TextFieldInputMode`
`label`	`label`		`string`	"textarea"	Sets floating label value.
`max`			`string \\| number`
`maxLength`	`maxLength`		`number`	0	Maximum length input to accept.
`min`			`string \\| number`
`minLength`			`number`
`name`			`string`
`outlined`			`boolean`	true
`pattern`			`string`
`placeholder`			`string`
`prefix`			`string`
`readOnly`			`boolean`
`required`	`required`		`boolean`	false	Displays error state if value is empty and input is blurred.
`ripple`		readonly	`Promise<RippleInterface \\| null> \\| undefined`		Implement ripple getter for Ripple integration with mwc-formfield
`rows`			`number`
`selectionEnd`		readonly	`number \\| null`
`selectionStart`		readonly	`number \\| null`
`size`			`number \\| null`
`step`			`number \\| "any" \\| null`		step can be a number or the keyword "any".Use `String` typing to pass down the value as a string and let the nativeinput cast internally as needed.
`suffix`			`string`
`type`			`TextFieldType`
`validateOnInitialRender`			`boolean`
`validationMessage`			`string`
`validity`		readonly	`ValidityState`
`validityTransform`			`((value: string, nativeValidity: ValidityState) => Partial<ValidityState>) \\| null`
`value`			`string`
`willValidate`		readonly	`boolean`

Methods

Method	Type
`blur`	`(): void`
`checkValidity`	`(): boolean`
`click`	`(): void`
`focus`	`(): void`
`layout`	`(): Promise<void>`
`reportValidity`	`(): boolean`
`select`	`(): void`
`setCustomValidity`	`(message: string): void`
`setSelectionRange`	`(selectionStart: number, selectionEnd: number, selectionDirection?: "forward" \\| "backward" \\| "none" \\| undefined): void`