@finastra/textarea
Version:
Textarea Web Component
131 lines (118 loc) • 17.3 kB
Markdown
# fds-base-textarea
## Properties
| Property | Attribute | Modifiers | Type | Default | Description |
|---------------------------|---------------|-----------|--------------------------------------------------|---------|--------------------------------------------------|
| `autoValidate` | | | `boolean` | | |
| `autocapitalize` | | | `string` | | |
| `charCounter` | | | `boolean \| "external" \| "internal"` | | |
| `cols` | | | `number` | | |
| `dense` | `dense` | | `boolean` | false | |
| `disabled` | | | `boolean` | | Disabled state for the component. When `disabled` is set to `true`, the<br />component will not be added to form submission. |
| `endAligned` | | | `boolean` | | |
| `helper` | | | `string` | | |
| `helperPersistent` | | | `boolean` | true | |
| `icon` | | | `string` | | |
| `iconTrailing` | | | `string` | | |
| `inputMode` | | | `TextFieldInputMode` | | |
| `label` | | | `string` | | |
| `labelInside` | `labelInside` | | `boolean` | false | |
| `max` | | | `string \| number` | | |
| `maxLength` | | | `number` | | |
| `min` | | | `string \| number` | | |
| `minLength` | | | `number` | | |
| `name` | | | `string` | | |
| `outlined` | | | `boolean` | true | |
| `override` | | | | | |
| `pattern` | | | `string` | | |
| `placeholder` | | | `string` | | |
| `prefix` | | | `string` | | |
| `readOnly` | | | `boolean` | | |
| `required` | | | `boolean` | | |
| `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".<br /><br />Use `String` typing to pass down the value as a string and let the native<br />input 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>` |
| `renderOutline` | `(): string \| TemplateResult<ResultType>` |
| `reportValidity` | `(): boolean` |
| `select` | `(): void` |
| `setCustomValidity` | `(message: string): void` |
| `setSelectionRange` | `(selectionStart: number, selectionEnd: number, selectionDirection?: "forward" \| "backward" \| "none" \| undefined): void` |
# fds-textarea
## 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` | | |
| `dense` | `dense` | | `boolean` | false | Smaller textarea size. |
| `disabled` | `disabled` | | `boolean` | false | Disabled state for the component. When `disabled` is set to `true`, the<br />component 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` | true | |
| `icon` | | | `string` | | |
| `iconTrailing` | | | `string` | | |
| `inputMode` | | | `TextFieldInputMode` | | |
| `label` | `label` | | `string` | "textarea" | Sets floating label value. |
| `labelInside` | `labelInside` | | `boolean` | false | Is the label included in the textarea. |
| `max` | | | `string \| number` | | |
| `maxLength` | `maxLength` | | `number` | 0 | Maximum length input to accept. |
| `min` | | | `string \| number` | | |
| `minLength` | | | `number` | | |
| `name` | | | `string` | | |
| `outlined` | | | `boolean` | true | |
| `override` | | | | | |
| `pattern` | | | `string` | | |
| `placeholder` | `placeholder` | | `string` | "textarea" | Sets placeholder value displayed when input is empty. |
| `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".<br /><br />Use `String` typing to pass down the value as a string and let the native<br />input 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>` |
| `renderOutline` | `(): string \| TemplateResult<ResultType>` |
| `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. |