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
