Textarea Autogrow

Create <textarea> elements that automatically expand or shrink as the user types.

Usage

Wrap the <textarea> in the <kelp-autogrow> element.

Tell me about yourself

<label for="bio">Tell me about yourself</label>
<kelp-autogrow>
	<textarea id="bio" name="bio"></textarea>
</kelp-autogrow>

Starting Value

If your <textarea> includes a starting value that’s bigger than the default height, the <kelp-autogrow> component will automatically expand it on initialization.

Best Wizards

<label for="wizards">Best Wizards</label>
<kelp-autogrow>
	<textarea id="wizards" name="wizards">merlin
radagast
gandalf
ursula
morgan
rand
moraine
nynaeve</textarea>
</kelp-autogrow>

Events

The <kelp-autogrow> element emits a kelp:autogrow-ready event once it’s loaded and running.

document.addEventListener('kelp:autogrow-ready', (event) => {
	console.log('ready:', event.target);
});

Methods

While web components are self-instantiating, the <kelp-autogrow> element can be manually initialized with the .init() method if it fails for some reason.

const autogrow = document.querySelector('kelp-autogrow');
autogrow.init();

Install

The <kelp-autogrow> component is included in kelp.css and kelp.js.

If you’re installing components individually, load the /js/components/autogrow.js and /css/componentsautogrow.css files.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/kelpui@0/css/components/autogrow.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/kelpui@0/js/components/autogrow.js"></script>