Props & events
Components receive data through props and talk back through callback props.
Receiving props
Read props with the $props rune and destructure them. Give defaults right in the destructure.
<script>
let { label = 'Click', disabled = false } = $props();
</script>
<button {disabled}>{label}</button>Two-way binding
Mark a prop $bindable so a parent can bind to it with bind:.
<script>
let { value = $bindable('') } = $props();
</script>
<input bind:value />Callback props
Svelte 5 favours callback props over event dispatchers: pass a function in, call it from the child.
<!-- Parent -->
<Counter onchange={(n) => console.log('new value', n)} />
<!-- Counter.svelte -->
<script>
let { onchange } = $props();
let n = $state(0);
function inc() { n++; onchange?.(n); }
</script>
<button onclick={inc}>{n}</button>