Callback Props, $bindable and bind:

Events are just props

In Svelte 5, DOM events are ordinary attributes (onclick={handler}, Svelte 4: on:click), and component events are callback props: the child accepts onselect and calls it. This replaces createEventDispatcher, which is deprecated. For two-way data flow, a child marks a prop as bindable with let { value = $bindable() } = $props(), and the parent writes bind:value={name}. Without bind:, the parent passes a normal one-way value. Prefer callbacks for actions and use bindings sparingly for form-like components, because two-way flows are harder to trace.

Callback prop and bindable value

A search box and a rating picker.

<!-- SearchBox.svelte -->
<script lang="ts">
  let { value = $bindable(''), onsearch }: {
    value?: string;
    onsearch: (q: string) => void;
  } = $props();
</script>

<form onsubmit={(e) => { e.preventDefault(); onsearch(value); }}>
  <input bind:value />
  <button>Search</button>
</form>

<!-- Parent.svelte -->
<script lang="ts">
  import SearchBox from './SearchBox.svelte';
  let query = $state('');
  function run(q: string) { console.log('searching', q); }
</script>

<SearchBox bind:value={query} onsearch={run} />
<p>Typing: {query}</p>

A phone number versus a shared notebook

A callback prop is a number the child can ring when something happens; a binding is a notebook both parent and child write in, convenient but harder to audit.

Quick check: What replaces createEventDispatcher in Svelte 5?

• A global event bus store
• The on: directive on components
• Passing callback functions as props
• The $emit rune