On this page Textarea Autosize Textarea Autosize

The m3e-textarea-autosize component automatically adjusts the height of a linked textarea to fit its content, preserving layout integrity and user experience. This non-visual element listens to input changes and applies dynamic resizing, constrained by optional row limits. 

import "@m3e/web/textarea-autosize";
 Usage

This section outlines usage examples and configuration guidance for the components in this package.

Basic usage

Use the m3e-textarea-autosize component to make a textarea automatically resize to fit its content. Use the for attribute to specify the textarea to autosize. The following example illustrates use of the m3e-textarea-autosize alongside a m3e-form-field. See Form Field for more information. 

<m3e-form-field variant="filled">
  <label slot="label" for="field">Textarea Autosize</label>
  <textarea id="field">
    <!-- Content omitted for brevity -->
  </textarea>
</m3e-form-field>
<m3e-textarea-autosize for="field"></m3e-textarea-autosize>
 Min and max rows

Use the min-rows and max-rows attributes to control the minimum and maximum number of rows for a textarea. 

<m3e-form-field variant="filled">
  <label slot="label" for="field">Textarea Autosize</label>
  <textarea id="field">
    <!-- Content omitted for brevity -->
  </textarea>
</m3e-form-field>
<m3e-textarea-autosize for="field" max-rows="5"></m3e-textarea-autosize>
 Disabling

Use the disabled attribute to disable autosize.

<m3e-textarea-autosize for="field" disabled></m3e-textarea-autosize>
 Accessibility

The component is given ARIA role="none" indicating the element is presentational and should be ignored by assistive technologies.

Native module support

The @m3e/web package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following. 

<script type="module" src="/node_modules/@m3e/web/dist/textarea-autosize.js"></script>

In addition, you must use an import map to include dependencies. 

<script type="importmap">
  {
    "imports": {
      "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.8.1/+esm",
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.0/",
      "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/+esm",
      "lit-html/directive.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directive.js",
      "lit-html/directives/if-defined.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/if-defined.js",
      "lit-html/directives/class-map.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/class-map.js",
      "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/+esm",
      "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/",
      "@m3e/web/core": "/node_modules/@m3e/web/dist/core.js"
    }
  }
</script>

For production builds, use the minified files to ensure optimal load performance.

API

The @m3e/web package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.