Why bindings enable two-way data flow in Svelte

Introduction

Bindings let your app keep data and the user interface in sync automatically. When the user changes something, the data updates, and when the data changes, the interface updates.

You want a form input to update a variable as the user types.

You want a slider to change a value and show the new value instantly.

You want to keep a checkbox state and a variable linked together.

You want to reflect changes in data immediately in the UI without extra code.

Syntax

Svelte

<input bind:value={variable} />

The bind:value syntax connects the input's value to the variable.

Changes in the input update the variable, and changes in the variable update the input.

Examples

This example shows a text input bound to the name variable. Typing updates name, and the greeting updates instantly.

Svelte

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

<input bind:value={name} placeholder="Enter your name" />
<p>Hello {name}!</p>

This checkbox is bound to checked. Clicking it updates the variable and the text below.

Svelte

<script>
  let checked = false;
</script>

<label>
  <input type="checkbox" bind:checked={checked} />
  Accept terms
</label>
<p>Checked: {checked}</p>

A slider bound to volume. Moving the slider updates the number shown.

Svelte

<script>
  let volume = 50;
</script>

<input type="range" min="0" max="100" bind:value={volume} />
<p>Volume: {volume}</p>

Sample Program

This simple Svelte component binds the input's value to the message variable. Whatever you type shows immediately below.

Svelte

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

<label for="msg">Type a message:</label>
<input id="msg" bind:value={message} placeholder="Write something..." />
<p>You typed: {message}</p>

Important Notes

Bindings reduce the need for manual event listeners and state updates.

They work with many form elements like inputs, checkboxes, selects, and textareas.

Remember to use bind: prefix to enable two-way binding in Svelte.

Summary

Bindings keep data and UI in sync automatically.

They make user input update variables and variables update UI instantly.

Use bind: syntax on form elements for easy two-way data flow.