Understanding bind:value Between Parent and Child Components in Svelte

One convenient Svelte feature is two-way binding with bind:value. It can keep state in a parent component synchronized with a value exposed by a child component without writing separate event-handling boilerplate.

The following example connects a reusable input component to state in its parent.

1. Child Component: InputField.svelte

Create src/lib/components/InputField.svelte:

<script lang="ts">
    export let value: string = "";
</script>
  
<h2>Child Component</h2>
<input type="text" bind:value />
<p>Input value in child: {value}</p>

How it works:

• export let value declares a prop that can receive a value from the parent.
• bind:value binds the input element to that prop.
• {value} displays the current value inside the child component.

2. Parent Component: +page.svelte

Open src/routes/+page.svelte:

<script lang="ts">
	import InputField from '$lib/components/InputField.svelte';
  
	let name: string = "";
</script>
  
<h1>bind:value</h1>
  
<InputField bind:value={name} />
  
<p>Value from parent: {name}</p>

Here:

• let name = "" stores the parent state.
• <InputField bind:value={name} /> connects the parent’s name variable to the child’s value prop.
• Typing in the child input updates name in the parent.
• Changing name in the parent updates the child value as well.

3. Result

When the application runs:

1. Type into the child input field and the same text appears in both the child and parent output.
2. If the parent changes name, the child input reflects the updated value.

That is the core benefit of bind:value: concise two-way synchronization between a component value and parent state.

Conclusion

For this Svelte component pattern:

• The child exposes value and binds it to its input.
• The parent uses bind:value={state} when rendering the child.
• No separate on:input synchronization handler is required.

The example uses Svelte’s legacy component syntax (export let), which remains relevant for existing Svelte codebases. If you are writing a new Svelte 5 application in runes mode, use the corresponding Svelte 5 bindable-prop syntax instead.