Two-Way Binding with bind:

In many frontend applications, user input needs to stay synchronized with application data. Svelte simplifies this process with two-way binding.

Two-way binding automatically connects form inputs to variables, allowing the interface and data to update together.

What Is Two-Way Binding?

Two-way binding means:

• The interface updates when data changes;
• The data updates when the user changes the interface.

This creates a direct connection between input elements and application state.

Using bind:value

Open App.svelte and add the following code:

<script>
  let username = "";
</script>

<input bind:value={username} placeholder="Enter your name" />

<h2>Hello {username}</h2>

As the user types into the input field, the value of username updates automatically.

At the same time, the displayed text updates instantly inside the interface.

Why Binding Is Useful

Without two-way binding, developers usually need to:

• Listen for input events;
• Read input values manually;
• Update variables manually.

Svelte simplifies this workflow with the bind: directive.

This helps reduce repetitive code and makes forms easier to manage.

Binding Different Input Types

Svelte supports binding for many form elements including:

• Text inputs;
• Textareas;
• Checkboxes;
• Select menus;
• Range sliders.

This makes form handling much more efficient in modern frontend applications.