## `` API Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties). ### Properties | Name | Type | Default | Summary | |-|-|-|-| | checkValidity (JS only) | `checkValidity() => boolean` | `-` | Checks whether the textarea passes constraint validation | | disabled | `boolean` | `false` | Makes the element not focusable and hides it from form submits | | handler (JS only) | `handler(e: InputEvent) => void` | `-` | - | | help-text | `string \| undefined` | `-` | Description shown below the input field | | helpTextSlotChange (JS only) | `helpTextSlotChange() => void` | `-` | - | | invalid | `boolean` | `false` | Mark the form field as invalid. | | label | `string \| undefined` | `-` | Either a `label` or an `aria-label` must be provided. | | maxlength | `number \| undefined` | `-` | Sets the maximum number of text rows before the content starts scrolling. | | maximum-rows | `number \| undefined` | `-` | Sets the maximum number of text rows before the content starts scrolling. | | minlength | `number \| undefined` | `-` | Sets the minimum number of characters for the textarea to be valid | | minimum-rows | `number \| undefined` | `-` | Sets the minimum number of text rows the textarea should display | | name | `string \| undefined` | `-` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form | | optional | `boolean` | `false` | Show an icon behind the label indicating the field is optional | | placeholder | `string \| undefined` | `-` | Shown in the textarea when it doesn't have a value | | read-only | `boolean` | `false` | **Deprecated**: Use the native `readonly` attribute instead | | readonly | `boolean` | `false` | Whether the input can be selected but not changed by the user | | reportValidity (JS only) | `reportValidity() => boolean` | `-` | Checks validity and shows the validation message if invalid | | required | `boolean` | `false` | Whether user input is required on the input before form submission | | resetFormControl (JS only) | `resetFormControl() => void` | `-` | - | | setCustomValidity (JS only) | `setCustomValidity(message: string) => void` | `-` | Sets a custom validation message. Pass an empty string to clear. | | tooltip | `string \| undefined` | `-` | Supplementary information that should show in a tooltip behind an information icon after the label. | | validationMessage (JS only) | `string` | `-` | Returns the validation message if the textarea is invalid, otherwise an empty string | | validity (JS only) | `ValidityState` | `-` | Returns the validity state of the textarea | | value | `string \| undefined` | `-` | Lets you set the current value | ### Property Details #### checkValidity (JS only) Checks whether the textarea passes constraint validation - Type: `checkValidity() => boolean` - Default: `-` #### disabled Keep in mind that using disabled in its current form is an anti-pattern. There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons. Please consider more informative alternatives before choosing to use disabled on an element. - Type: `boolean` - Default: `false` #### handler (JS only) - Type: `handler(e: InputEvent) => void` - Default: `-` #### help-text Use in combination with `invalid` to show as a validation error message, or on its own to show a help text. - Type: `string | undefined` - Default: `-` #### helpTextSlotChange (JS only) - Type: `helpTextSlotChange() => void` - Default: `-` #### invalid Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem. - Type: `boolean` - Default: `false` #### label Either a `label` or an `aria-label` must be provided. - Type: `string | undefined` - Default: `-` #### maxlength Sets the maximum number of text rows before the content starts scrolling. - Type: `number | undefined` - Default: `-` #### maximum-rows Sets the maximum number of text rows before the content starts scrolling. - Type: `number | undefined` - Default: `-` #### minlength Sets the minimum number of characters for the textarea to be valid - Type: `number | undefined` - Default: `-` #### minimum-rows Sets the minimum number of text rows the textarea should display - Type: `number | undefined` - Default: `-` #### name The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form - Type: `string | undefined` - Default: `-` #### optional Show an icon behind the label indicating the field is optional - Type: `boolean` - Default: `false` #### placeholder Set a text that is shown in the textarea when it doesn't have a value. Placeholder text should not be used as a substitute for labeling the element with a visible label. - Type: `string | undefined` - Default: `-` #### read-only **Deprecated**: Use the native `readonly` attribute instead - Type: `boolean` - Default: `false` #### readonly Whether the input can be selected but not changed by the user - Type: `boolean` - Default: `false` #### reportValidity (JS only) Checks validity and shows the validation message if invalid - Type: `reportValidity() => boolean` - Default: `-` #### required Whether user input is required on the input before form submission - Type: `boolean` - Default: `false` #### resetFormControl (JS only) - Type: `resetFormControl() => void` - Default: `-` #### setCustomValidity (JS only) Sets a custom validation message. Pass an empty string to clear. - Type: `setCustomValidity(message: string) => void` - Default: `-` #### tooltip Supplementary information that should show in a tooltip behind an information icon after the label. You must provide a label to be able to show an info icon with a tooltip. - Type: `string | undefined` - Default: `-` #### validationMessage (JS only) Returns the validation message if the textarea is invalid, otherwise an empty string - Type: `string` - Default: `-` #### validity (JS only) Returns the validity state of the textarea - Type: `ValidityState` - Default: `-` #### value Lets you set the current value - Type: `string | undefined` - Default: `-` ### Events #### - - Type: `unknown`