Textarea bindings in Svelte

Introduction

Textarea bindings let you easily connect a text area in your webpage to your code. This means when you type in the box, your code knows about it right away.

When you want to get user input that can be multiple lines, like comments or messages.

When you want to show what the user types somewhere else on the page instantly.

When you want to save or process text typed by the user without extra steps.

When you want to reset or clear the text area from your code easily.

When you want to limit or check the text length as the user types.

Syntax

Svelte

<textarea bind:value={variable}></textarea>

The bind:value connects the textarea's content to a variable in your script.

When the user types, the variable updates automatically, and if you change the variable, the textarea updates too.

Examples

This sets up a textarea linked to the message variable. Typing changes message.

Svelte

<script>
  let message = '';
</script>

<textarea bind:value={message}></textarea>

The textarea starts with 'Hello!' because note has that initial value.

Svelte

<script>
  let note = 'Hello!';
</script>

<textarea bind:value={note}></textarea>

Textarea with size set by rows and cols, still bound to feedback.

Svelte

<script>
  let feedback = '';
</script>

<textarea bind:value={feedback} rows="4" cols="30"></textarea>

Sample Program

This Svelte component shows a textarea where you can type a comment. Whatever you type appears below instantly. The textarea has an accessible label and a size for better user experience.

Svelte

<script>
  let comment = '';
</script>

<h2>Write your comment:</h2>
<textarea bind:value={comment} rows="5" cols="40" aria-label="User comment"></textarea>

<p><strong>Your comment is:</strong></p>
<p>{comment}</p>

Important Notes

Always add aria-label or use a visible label for accessibility.

Textarea bindings keep your UI and data in sync without extra code.

You can style the textarea with CSS to improve look and feel.

Summary

Textarea bindings connect the text area content directly to a variable.

Typing updates the variable immediately, and changing the variable updates the textarea.

This makes handling multi-line user input simple and reactive.