Svelte Bindings Explained — Two-Way Data Binding

In this tutorial, you will learn about Svelte Bindings Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Svelte's bind: directive provides two-way data binding between variables and DOM element properties, form inputs, component props, and element measurements.

What You'll Learn

• bind:value for inputs
• bind:group for radio groups
• bind:this for element references
• bind:clientWidth and other dimension bindings
• Binding component props

Why It Matters

Bindings eliminate manual onChange handlers and ref wiring. Svelte supports binding to over 20 element properties, making form handling and DOM interaction declarative.

<script>
  let name = "";
  let age = null;
  let color = "#ff3e00";
  let size = 16;
  let divWidth = 0;
  let divHeight = 0;
  let divElement;
</script>

<input bind:value={name} placeholder="Name" />
<input type="number" bind:value={age} placeholder="Age" />
<input type="color" bind:value={color} />
<input type="range" bind:value={size} min={10} max={40} />

<div bind:clientWidth={divWidth} bind:clientHeight={divHeight}
     style="background: {color}; width: 200px; height: 100px; font-size: {size}px;">
  <p>Hello {name || "Stranger"}!</p>
</div>

<p>Div width: {divWidth}px, height: {divHeight}px</p>

Expected output: Input fields update the div's content and style in real time. Div dimensions update reactively as the div resizes.