@material/mwc-textarea NPM

`<mwc-textarea>`

IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.

Text areas let users enter and edit text.

Installation

npm install @material/mwc-textarea

NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.

Example usage

Standard

<mwc-textarea label="My Textarea"></mwc-textarea>

<script type="module">
  import '@material/mwc-textarea/mwc-textarea.js';
</script>

Helper Text

<mwc-textarea label="My Textarea" helper="Helper Text"></mwc-textarea>

Primary Color

<style>
  mwc-textarea {
    --mdc-theme-primary: green;
  }
</style>

<mwc-textarea
    label="My Textarea"
    required>
</mwc-textarea>

Variants

Outlined

<mwc-textarea
    outlined
    label="My Textarea">
</mwc-textarea>

Shaped

<style>
  mwc-textarea.rounded {
    --mdc-shape-small: 28px;
  }
</style>

<mwc-textarea
    class="rounded"
    label="My Textarea"
    outlined>
</mwc-textarea>

API

Properties/Attributes

Name	Type	Description
`rows`	`number`	Sets number of visible text lines.
`cols`	`number`	Sets the visible width of the textarea.
`value`	`string`	The input control's value.
`type`	`TextFieldType*`	A string specifying the type of control to render.
`label`	`string`	Sets floating label value.
`placeholder`	`string`	Sets disappearing input placeholder.
`icon`	`string`	Leading icon to display in input. See `mwc-icon`.
`iconTrailing`	`string`	Trailing icon to display in input. See `mwc-icon`.
`disabled`	`boolean`	Whether or not the input should be disabled.
`charCounter`	`boolean`\|`TextAreaCharCounter**`	Note: 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.
`outlined`	`boolean`	Whether or not to show the material outlined variant.
`helper`	`string`	Helper text to display below the input. Display default only when focused.
`helperPersistent`	`boolean`	Always show the helper text despite focus.
`required`	`boolean`	Displays error state if value is empty and input is blurred.
`maxLength`	`number`	Maximum length input to accept.
`validationMessage`	`string`	Message to show in the error color when the textarea is invalid. (Helper text will not be visible)
`validity`	`ValidityState` (readonly)	The `ValidityState` of the textfield.
`willValidate`	`boolean` (readonly)	`HTMLInputElement.prototype.willValidate`
`validityTransform`	`ValidityTransform***`\|`null`	Callback called before each validation check. See the validation section for more details.
`validateOnInitialRender`	`boolean`	Runs validation check on initial render.
`name`	`string`	Sets the `name` attribute on the internal textarea.***

* TextFieldType is exported by mwc-textarea and mwc-textarea-base.

type TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|
    'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';

** TextAreaCharCounter is exported by mwc-textarea.

type TextAreaCharCounter = 'external'|'internal';

\*\*\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.
```ts
type ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial<ValidityState>

*** The name property should only be used for browser autofill as webcomponent form participation does not currently consider the name attribute. See #289.

Methods

Name	Description
`checkValidity() => boolean`	Returns `true` if the textarea passes validity checks. Returns `false` and fires an `invalid` event on the textarea otherwise.
`reportValidity() => boolean`	Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.
`setCustomValidity(message:string) => void`	Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.
`layout() => Promise<void>`	Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.

CSS Custom Properties

Inherits CSS Custom properties from:

Name	Default	Description
`--mdc-text-area-filled-border-radius`	`4px 4px 0 0`	Border radius of the standard / filled textarea's background filling.
`--mdc-text-area-outlined-idle-border-color`	`rgba(0, 0, 0, 0.38)`	Color of the outlined textarea's outline when idle.
`--mdc-text-area-outlined-hover-border-color`	`rgba(0, 0, 0, 0.87)`	Color of the outlined textarea's outline when hovering.
`--mdc-text-area-outlined-disabled-border-color`	`rgba(0, 0, 0, 0.06)`	Color of the outlined textarea's outline when disabled.

Global Custom Properties

This component exposes the following global theming custom properties.

Name	Description
`--mdc-theme-primary`	Color when active of the underline ripple, the outline, and the caret.
`--mdc-theme-error`	Color when errored of the underline, the outline, the caret, and the icons.
`--mdc-typography-subtitle1-<PROPERTY>`	Styles the typography of the texarea, excluding line-height.

Validation

<mwc-textarea> follows the basic <input> constraint validation model. It exposes:

required
maxLength
validity
willValidate
checkValidity()
reportValidity()
setCustomValidity(message)

Additionally, it implements more features such as:

validationMessage
validateOnInitialRender
and validityTransform

By default, <mwc-textarea> will report validation on blur.

Custom validation logic

The validityTransform property is a function that can be set on <mwc-textarea> to implement custom validation logic that transforms the ValidityState of the input control. The type of a ValidityTransform is the following:

(value: string, nativeValidity: ValidityState) => Partial<ValidityState>

Where value is the new value in the textarea to be validated and nativeValidity is an interface of ValidityState of the native input control. For example:

<mwc-textarea
    id="my-textarea"
    maxlength="5"
    value="doggos">
</mwc-textarea>
<script>
  const textarea = document.querySelector('#my-textarea');
  textarea.validityTransform = (newValue, nativeValidity) => {
    if (!nativeValidity.valid) {
      if (nativeValidity.tooLong) {
        const hasDog = newValue.includes('dog');
        // changes to make to the nativeValidity
        return {
          valid: hasDog,
          tooLong: !hasDog;
        };
      } else {
        // no changes
        return {};
      }
    } else {
      const isValid = someExpensiveOperation(newValue);
      // changes to make to the native validity
      return {
        valid: isValid,
        // or whatever type of ValidityState prop you would like to set (if any)
        customError: !isValid,
      };
    }
  }
</script>

In this example we first check the native validity which is invalid due to the maxlength (the value is doggos which is a string longer than 5). The value includes dog, thus we make it valid and undo the tooLong error in the ValidityState by returning a Partial<ValidityState> that indicates what to change in the initial validity.

<mwc-textarea>