Elastic Textarea

A web component for progressively-enhanced auto-expanding textareas.

This web component progressively enhances the native textarea: as a user types in the textarea, its height increases so that its content is never clipped. When the user deletes content in the textarea it shrinks back down to a minimum number of rows.

(Note: if a user manually resizes a textarea it will no longer be elastic.)

Installation

NPM

You can install via npm:

npm i @cloudfour/elastic-textarea

Then you'll need to import the component code:

import "@cloudfour/elastic-textarea";

CDN

Alternately, you can load the script via CDN:

<script
  type="module"
  src="https://unpkg.com/@cloudfour/elastic-textarea/index.min.js"
></script>

Usage

Once the JavaScript has been loaded, you can use elastic-textarea in your HTML.

elastic-textarea is meant to wrap one or more textarea elements. This ensures that before the JS loads and runs, the textarea is still usable.

<elastic-textarea>
  <label>
    Textarea 1
    <textarea name="textarea-1"></textarea>
  </label>
</elastic-textarea>

If multiple textarea elements are wrapped in an elastic-textarea they will all be initialized. This allows you to easily wrap an entire form or page and enhance all the textareas within:

<elastic-textarea>
  <label>
    Textarea 1
    <textarea name="textarea-1"></textarea>
  </label>
  <label>
    Textarea 2
    <textarea name="textarea-2"></textarea>
  </label>
</elastic-textarea>