Svelte Svelte
search ⌘K

Svelte • Runes

$bindable

Ordinarily, props go one way, from parent to child. This makes it easy to understand how data flows around your app.

In Svelte, component props can be bound, which means that data can also flow up from child to parent. This isn’t something you should do often — overuse can make your data flow unpredictable and your components harder to maintain — but it can simplify your code if used sparingly and carefully.

It also means that a state proxy can be mutated in the child.

Mutation is also possible with normal props, but is strongly discouraged — Svelte will warn you if it detects that a component is mutating state it does not ‘own’.

To mark a prop as bindable, we use the $bindable rune:

<script lang="ts">
	let { let value: anyvalue = 
function $bindable<unknown>(fallback?: unknown): unknown
namespace $bindable
Declares a prop as bindable, meaning the parent component can use bind:propName={value} to bind to it.
let { propName = $bindable() }: { propName: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$bindable Documentation}
$
function $bindable<unknown>(fallback?: unknown): unknown
namespace $bindable
Declares a prop as bindable, meaning the parent component can use bind:propName={value} to bind to it.
let { propName = $bindable() }: { propName: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$bindable Documentation}
bindable(), ...let props: anyprops } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<input bind:value={let value: anyvalue} {...let props: anyprops} />

<style>
	input {
		font-family: 'Comic Sans MS';
		color: deeppink;
	}
</style>
<script>
	let { let value: anyvalue = 
function $bindable<unknown>(fallback?: unknown): unknown
namespace $bindable
Declares a prop as bindable, meaning the parent component can use bind:propName={value} to bind to it.
let { propName = $bindable() }: { propName: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$bindable Documentation}
$
function $bindable<unknown>(fallback?: unknown): unknown
namespace $bindable
Declares a prop as bindable, meaning the parent component can use bind:propName={value} to bind to it.
let { propName = $bindable() }: { propName: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$bindable Documentation}
bindable(), ...let props: anyprops } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();
</script>

<input bind:value={let value: anyvalue} {...let props: anyprops} />

<style>
	input {
		font-family: 'Comic Sans MS';
		color: deeppink;
	}
</style>

Now, a component that uses <FancyInput> can add the bind: directive (demo):

<script lang="ts">
	import 
type FancyInput = SvelteComponent<Record<string, any>, any, any>
const FancyInput: LegacyComponentType
FancyInput from './FancyInput.svelte';

	let let message: stringmessage = 
function $state<"hello">(initial: "hello"): "hello" (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<"hello">(initial: "hello"): "hello" (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state('hello');
</script>

<const FancyInput: LegacyComponentTypeFancyInput bind:value: stringvalue={let message: stringmessage} />
<p>{let message: stringmessage}</p>
<script>
	import 
type FancyInput = SvelteComponent<Record<string, any>, any, any>
const FancyInput: LegacyComponentType
FancyInput from './FancyInput.svelte';

	let let message: stringmessage = 
function $state<"hello">(initial: "hello"): "hello" (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<"hello">(initial: "hello"): "hello" (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state('hello');
</script>

<const FancyInput: LegacyComponentTypeFancyInput bind:value: stringvalue={let message: stringmessage} />
<p>{let message: stringmessage}</p>

The parent component doesn’t have to use bind: — it can just pass a normal prop. Some parents don’t want to listen to what their children have to say.

In this case, you can specify a fallback value for when no prop is passed at all:

let { let value: anylet value: anyvalue = 
function $bindable<"fallback">(fallback?: "fallback" | undefined): "fallback"
namespace $bindable
Declares a prop as bindable, meaning the parent component can use bind:propName={value} to bind to it.
let { propName = $bindable() }: { propName: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$bindable Documentation}
function $bindable<"fallback">(fallback?: "fallback" | undefined): "fallback"
namespace $bindable
Declares a prop as bindable, meaning the parent component can use bind:propName={value} to bind to it.
let { propName = $bindable() }: { propName: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$bindable Documentation}
$bindable('fallback'), ...let props: anylet props: anyprops } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$props();
Edit this page on GitHub llms.txt