bindable in Svelte
From the Svelte cheat sheet · Props & Bindings · verified Jul 2026
$bindable
Two-way binding for props
javascript
<!-- Child.svelte -->
<script>
let { value = $bindable() } = $props();
</script>
<input bind:value />
<!-- Parent.svelte -->
<script>
import Child from './Child.svelte';
let text = $state('');
</script>
<Child bind:value={text} />
<p>Parent sees: {text}</p>🔄 Enables two-way data binding between components
📤 Child can update parent state directly
🎯 Replaces bind:prop directive pattern
⚡ Works seamlessly with $state in parent