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();