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

CSS Custom Properties

| Property | Type | Default | Description | | --------------- | ----- | --------- | --------------- | | --fds-primary | color | "#694ED6" | Textarea color. |