# Callback Props, $bindable and bind: — Svelte / SvelteKit

Source: https://www.skillbyai.com/en/svelte/c-events

> Telling the parent something changed.

## 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.

```svelte
<!-- 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.

**Quiz:** What replaces createEventDispatcher in Svelte 5?

- [ ] A global event bus store
- [ ] The on: directive on components
- [x] Passing callback functions as props
- [ ] The $emit rune

*Answer:* Passing callback functions as props. Component events are callback props.