How Binding Works in Svelte
Ferenc Almasi • 2020 September 25 •
1 min read
You can bind elements to variables in Svelte. This way, any change to a variable will be reflected for the element and vice versa.
Copied to clipboard!
<!-- You can bind elements to variables, to reflect the value of the element in the variable -->
<input type="email" bind:value={user.email} />You also have the option to use a shorthand in case the name and value matches:
Copied to clipboard!
<!-- The two lines below are equivalent -->
<input type="text" bind:value={value} />
<input type="text" bind:value />If you want to bind variables to checkboxes, you need to use the bind:checked directive:
Copied to clipboard!
<!-- Use the bind:checked for checkboxes -->
<input type="checkbox" bind:checked={user.consent} />If you want to do the same with HTML content, you need to use bind:innerHTML:
Copied to clipboard!
<!-- use bind:innerHTML to bind HTML -->
<article contenteditable=”true”
bind:innerHTML={article.content}>
</article>You can also bind to editable contents with the bind:textContent directive:
Copied to clipboard!
<!-- use bind:textContent to bind to contenteditable -->
<h1 contenteditable="true"
bind:textContent={article.title}>
</h1>
Resources:
📚 More Webtips
Master the Art of Frontend
Access 100+ interactive lessons- Unlimited access to hundreds of tutorials
- Prepare for technical interviews
