Two-Way Binding with bind:value

Setting an input's value from state, and updating that state when the user types, is such a common pairing that Svelte gives it dedicated syntax: bind:value.

<script>
  let name = $state('');
</script>

<input bind:value={name} />
<p>Hello, {name || 'stranger'}!</p>

Without bind:, you'd write this out by hand as a one-way value={name} plus an oninput handler that reassigns name — bind:value is exactly that pattern, generated for you. Type in the input, and name updates; change name from code elsewhere, and the input's displayed value updates too.

Not just text inputs

bind: works across the form elements you'd expect, adapting to what makes sense for each one:

<script>
  let agreed = $state(false);
  let plan = $state('basic');
  let volume = $state(50);
</script>

<input type="checkbox" bind:checked={agreed} />
<select bind:value={plan}>
  <option value="basic">Basic</option>
  <option value="pro">Pro</option>
</select>
<input type="range" bind:value={volume} />

Checkboxes bind checked (a boolean) rather than value; a <select> binds to whichever <option>'s value matches; a range input keeps volume numeric automatically rather than as a string — Svelte handles the type coercion that plain DOM events wouldn't give you for free.

Binding to component props

bind: isn't limited to native form elements — a component can expose one of its own props as bindable, letting a parent bind to it the same way:

<!-- NumberInput.svelte -->
<script>
  let { value = $bindable(0) } = $props();
</script>

<input type="number" bind:value={value} />

<!-- App.svelte -->
<script>
  import NumberInput from './NumberInput.svelte';
  let quantity = $state(1);
</script>

<NumberInput bind:value={quantity} />
<p>Quantity: {quantity}</p>

$bindable() is what makes this opt-in rather than automatic: a plain prop stays read-only (as covered in the props lesson), and marking it $bindable is a deliberate signal that a parent is allowed to write back through it — the component author decides which props can be bound, rather than every prop silently becoming two-way.

Use it for genuinely two-way state

bind: is convenient, but it's still creating a tighter coupling between parent and child than a plain prop. Reach for it when a value really is jointly owned — a form field, a toggle a parent needs to read and reset — rather than as a default way to pass every prop, where a plain one-way prop keeps the data flow easier to follow.