# r-textarea A multiline text input form control with validation, optional character count, configurable resize behaviour. Example ``` ``` ## class: `RTextarea`, `r-textarea` ### Fields | Name | Privacy | Type | Default | Description | Inherited From | | ------------------------------ | ------- | -------------------------------------------------------------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | | `autocapitalize` | | `string` | | Controls automatic capitalisation on mobile virtual keyboards.
Equivalent to the native `autocapitalize` attribute. | | | `autocomplete` | | `string` | | Native `autocomplete` hint for browsers / password managers. | | | `autofocus` | | `boolean` | | Automatically focuses the textarea when the page loads.
Reflected to the host so it can be queried as an attribute. | | | `characterLimitReachedMessage` | | `string` | `"You've reached the character limit."` | Custom message when the character limit is reached to alert screen reader users. | | | `cols` | | `number` | | Specifies the visible width of the `` in terms <br>of the number of characters. | | | `customErrorMessage` | | `string` | | Custom error message displayed for any validation failures in the `<textarea>`. | | | `dirname` | | `string` | | Enables form submission of the textarea's text-direction. The value is the field<br>name used to submit the direction (`ltr` or `rtl`) as a separate form entry. | | | `disabled` | | `boolean` | | Indicates whether the `<textarea>` is disabled, preventing <br>user interaction and input when set to true. | | | `error` | | `string` | | Custom error message provided independently of the <br>Constraint Validation API for the `<textarea>`. | | | `fieldIndicator` | | `string` | | Text of an additional marker in the label | | | `form` | | `string` | | Specifies the `id` of the `<form>` to which the element belongs | | | `hint` | | `string` | | Optional text displayed below the `<textarea>`, providing <br>additional context or guidance to the user. | | | `inputmode` | | `string` | | Hints to the browser which virtual keyboard to display on mobile devices.<br>Equivalent to the native `inputmode` attribute. | | | `invalid` | | `boolean` | | Indicates whether the value of the `<textarea>` <br>is invalid based on validation rules. | | | `label` | | `string` | | Text displayed as the label above the `<textarea>`, <br>indicating its purpose to the user. | | | `maxlength` | | `number` | | Specifies the maximum number of characters allowed in the `<textarea>`,<br>enforcing input length limits. | | | `minlength` | | `number` | | Specifies the minimum number of characters required in the `<textarea>`, <br>enforcing input length constraints. | | | `name` | | `string` | | Sets the `name` attribute on the underlying `<textarea>`, allowing the control <br>to be identified during form submission. | | | `novalidate` | | `boolean` | | Specifies if element must be ignored during validation of the form elements | | | `placeholder` | | `string` | `'Provide an input'` | Specifies a short hint that describes the expected value of the `<textarea>`, <br>displayed when it is empty. | | | `readonly` | | `boolean` | | Indicates whether the `<textarea>` is read-only, allowing focus and text selection<br>while preventing the user from modifying its value. | | | `required` | | `boolean` | | Indicates that the `<textarea>` must be filled out <br>before submitting the form. | | | `resize` | | `"both" \| "horizontal" \| "inherit" \| "initial" \| "none" \| "vertical"` | `'none'` | Controls the resizability of the `<textarea>`, allowing <br>or preventing the user from resizing it. | | | `rows` | | `number` | | Defines the number of visible text lines in the `<textarea>`, <br>controlling its vertical size. | | | `showCounter` | | `boolean` | | Specifies if the character counter should be visible.<br><br>Note: The counter will only be rendered when a `maxlength` value is provided. | | | `tooLongMessage` | | `string` | | Custom message for `tooLong` property of a ValidityState <br>object (set by `maxlength`) within Constrain Validation API. | | | `tooShortMessage` | | `string` | | Set custom message for `tooShort` property of a ValidityState object <br>(set by `minlength`) within Constrain Validation API | | | `valid` | | `boolean` | | Indicates whether the value of the `<textarea>` <br>is valid based on validation rules. | | | `value` | | `string` | `this.textareaSlotValue` | Represents the current value of the `<textarea>`, reflecting the content entered <br>by the user or provided programmatically. | | | `valueMissingMessage` | | `string` | | Custom message for `valueMissing` property of a ValidityState <br>object (set by `required`) within Constrain Validation API. | | | `wrap` | | `"hard" \| "off" \| "soft"` | | Controls how the browser wraps text in the textarea when submitting a form.<br>\`soft` (default): lines are not wrapped; `hard`: lines are wrapped with CRLF at `cols` width. | | ### Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ----------------------- | ------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------- | | `checkValidity` | | Validates the textarea without triggering UI and returns a boolean indicating its validity. | | `Promise<boolean>` | | | `getDefaultValue` | | Returns the initial (default) value set on the textarea before any user edits. | | `Promise<string>` | | | `getSelectionDirection` | | Returns the direction of the current text selection. | | `Promise<"none" \| "forward" \| "backward">` | | | `getSelectionEnd` | | Returns the end position of the text selection. | | `Promise<number>` | | | `getSelectionStart` | | Returns the start position of the text selection. | | `Promise<number>` | | | `getTextLength` | | Returns the number of characters in the textarea (mirrors the native `textLength` property). | | `Promise<number>` | | | `getValidity` | | Returns the native `ValidityState` object for the textarea. | | `Promise<ValidityState>` | | | `getValue` | | Gets the value of the element. | | `Promise<string>` | | | `getWillValidate` | | Returns whether this textarea participates in constraint validation. | | `Promise<boolean>` | | | `reportValidity` | | Validates an element and displays validity state. | | `Promise<void>` | | | `reset` | | Resets value and validity state to initial. | | `Promise<void>` | | | `select` | | Selects all text in the textarea and focuses it. | | `Promise<void>` | | | `setBlur` | | Removes focus from the element. | | `Promise<void>` | | | `setCustomValidity` | | Validates an element, displays provided message in case value is invalid. | `message: string` | `Promise<void>` | | | `setFocus` | | Sets focus on the element. | | `Promise<void>` | | | `setRangeText` | | Focuses the textarea and replaces the current text selection with a new string. | `replacement: string, start: number, end: number, selectionMode: "select" \| "start" \| "end" \| "preserve"` | `Promise<void>` | | | `setSelectionRange` | | Focuses the textarea and sets the start and end positions of the text selection. | `start: number, end: number, direction: "none" \| "forward" \| "backward"` | `Promise<void>` | | | `setValue` | | Sets the value of the element. | `value: string` | `Promise<void>` | | ### Events | Name | Type | Description | Inherited From | | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | -------------- | | `rBeforeInput` | `CustomEvent<{ element: HTMLRTextareaElement; inputType: string; data: string; selectionStart: number; selectionEnd: number; cancelable: boolean; }>` | Emits `rBeforeInput` before text modification | | | `rBlur` | `CustomEvent<{ element: HTMLRTextareaElement; value: any; }>` | Emits `rBlur` when the textarea loses focus | | | `rChange` | `CustomEvent<{ element: HTMLRTextareaElement; value: any; }>` | Emits `rChange` when component's value has been changed | | | `rFocus` | `CustomEvent<{ element: HTMLRTextareaElement; value: any; }>` | Emits `rFocus` when the textarea receives focus | | | `rInput` | `CustomEvent<{ element: HTMLRTextareaElement; value: any; }>` | Emits `rInput` when component's value is changing | | | `rReset` | `CustomEvent<{ element: HTMLRTextareaElement; value: any; }>` | Emits `rReset` when component was reset to initial state by form reset | | | `rSelect` | `CustomEvent<{ element: HTMLRTextareaElement; selectionStart: number; selectionEnd: number; selectionDirection: "none" \| "forward" \| "backward"; value: string; }>` | Emits `rSelect` when text selection changes | | | `rValidate` | `CustomEvent<{ state: string; message: string; }>` | Emits event after each validation | | ### Attributes | Name | Field | Inherited From | | --------------------------------- | ---------------------------- | -------------- | | `autocapitalize` | autocapitalize | | | `autocomplete` | autocomplete | | | `autofocus` | autofocus | | | `character-limit-reached-message` | characterLimitReachedMessage | | | `cols` | cols | | | `custom-error-message` | customErrorMessage | | | `dirname` | dirname | | | `disabled` | disabled | | | `error` | error | | | `field-indicator` | fieldIndicator | | | `form` | form | | | `hint` | hint | | | `inputmode` | inputmode | | | `invalid` | invalid | | | `label` | label | | | `maxlength` | maxlength | | | `minlength` | minlength | | | `name` | name | | | `novalidate` | novalidate | | | `placeholder` | placeholder | | | `readonly` | readonly | | | `required` | required | | | `resize` | resize | | | `rows` | rows | | | `show-counter` | showCounter | | | `too-long-message` | tooLongMessage | | | `too-short-message` | tooShortMessage | | | `valid` | valid | | | `value` | value | | | `value-missing-message` | valueMissingMessage | | | `wrap` | wrap | | ### Slots | Name | Description | | --------- | ------------------------------------------ | | `popover` | Popover element attached to the label area | <hr/> ## Exports | Kind | Name | Declaration | Module | Package | | --------------------------- | ------------ | ----------- | ------ | ------- | | `js` | `RTextarea` | RTextarea | | | | `custom-element-definition` | `r-textarea` | RTextarea | | |