Component bindings in Svelte

Introduction

Component bindings let you connect data between a parent and child component so they stay in sync automatically.

You want a parent component to know when a child component's value changes.

You want to update a child component's value from the parent and keep it reactive.

You want to share form input values between components easily.

You want to keep UI elements like sliders or checkboxes synced across components.

Syntax

Svelte

<Child bind:property={parentVariable} />

The bind: directive connects a child component's property to a parent variable.

Changes in either the parent or child update the other automatically.

Examples

This binds the value property of the Input component to the name variable in the parent.

Svelte

<Input bind:value={name} />

The position property of Slider stays synced with sliderPos in the parent.

Svelte

<Slider bind:position={sliderPos} />

The checked state of the checkbox is bound to isChecked in the parent.

Svelte

<CustomCheckbox bind:checked={isChecked} />

Sample Program

This example shows a parent component with a message variable bound to the text property of the Child component. The child has an input box bound to text. Typing in the input updates message in the parent, and changes to message update the input.

Svelte

<script>
  import Child from './Child.svelte';
  let message = 'Hello';
</script>

<p>Parent message: {message}</p>
<Child bind:text={message} />

<!-- Child.svelte -->
<script>
  export let text;
</script>
<input bind:value={text} aria-label="Child input" />

Important Notes

Use bind: only on properties that the child component explicitly exports.

Bindings keep data in sync both ways without extra code.

Remember to add accessible labels like aria-label for inputs inside child components.

Summary

Component bindings connect parent and child data automatically.

Use bind:property to sync values both ways.

This makes UI updates simple and reactive without manual event handling.