
How Binding Works in Svelte
You can bind elements to variables in Svelte. This way, any change to a variable will be reflected for the element and vice versa.
<!-- You can bind elements to variables, to reflect the value of the element in the variable -->
<input type="email" bind:value={user.email} />
Copied to clipboard!
You also have the option to use a shorthand in case the name and value matches:
<!-- The two lines below are equivalent -->
<input type="text" bind:value={value} />
<input type="text" bind:value />
Copied to clipboard!
If you want to bind variables to checkboxes, you need to use the bind:checked
directive:
<!-- Use the bind:checked for checkboxes -->
<input type="checkbox" bind:checked={user.consent} />
Copied to clipboard!
If you want to do the same with HTML content, you need to use bind:innerHTML
:
<!-- use bind:innerHTML to bind HTML -->
<article contenteditable=βtrueβ
bind:innerHTML={article.content}>
</article>
Copied to clipboard!
You can also bind to editable contents with the bind:textContent
directive:
<!-- use bind:textContent to bind to contenteditable -->
<h1 contenteditable="true"
bind:textContent={article.title}>
</h1>
Copied to clipboard!


Looking to improve your skills? Learn how to build reactive apps with Svelte + Tailwind.

Resources:
π More Webtips
Master the Art of Frontend
Unlimited access to hundred of tutorials
Access to exclusive interactive lessons
Remove ads to learn without distractions