Textarea
Collect long form text from users with the <textarea> element. An optional web component can be used to automatically expand and shrink the <textarea> as the user types.
Textarea Field
Multi-line text fields.
<label for="vacation">What's your favorite vacation spot?</label>
<textarea type="text" id="vacation" name="vacation"></textarea>Readonly
Use the [readonly] attribute to display a textarea, but prevent users from editing it.
<label for="vacation-readonly">What's your favorite vacation spot?</label>
<textarea
type="text"
id="vacation-readonly"
name="vacation"
readonly
>
Anywhere with sun and sand!
</textarea>Autogrow
Wrap a <textarea> in the <kelp-autogrow> element to automatically expand and shrink its size as the user types.
<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.
<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();