Svelte is a powerful web framework that allows you to create two-way bindings between data and the user interface (UI). In this article, we will explore how to use bindings in Svelte and how they can be especially useful with forms.
Using bind:value
The most common form of binding in Svelte is using bind:value
. This allows you to bind a variable from the component state to a form field. For example:
<script>
let name = '';
</script>
<input bind:value={name}>
With this binding, whenever the name
variable changes, the input field will automatically update its value, and vice versa.
Note: Make sure to use
let
orvar
to define the variable, notconst
, asconst
variables cannot be reassigned in Svelte.
This binding works not only for regular input fields, but also for other types of fields like textarea
and select
.
Checkboxes and Radio Buttons
For checkboxes and radio buttons, Svelte provides three types of bindings:
bind:checked
: Binds a value to the checked state of the element.bind:group
: Associates a JavaScript array with a group of checkboxes or radio buttons, based on the choices made by the user.bind:indeterminate
: Binds to theindeterminate
state of an element.
Here are examples of each type of binding:
<script>
let isChecked;
let goodDogs = [];
let dogs = ['Roger', 'Syd'];
</script>
<input type="checkbox" bind:checked={isChecked}>
<input type="checkbox" bind:group={goodDogs} value={dog}>
<input type="checkbox" bind:indeterminate={isIndeterminate}>
Select Fields
bind:value
can also be used with select
form fields to automatically assign the selected value to a variable. For example:
<script>
let selected;
</script>
<select bind:value={selected}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
If the options are generated dynamically from an array of objects, the selected option will be an object instead of a string:
<script>
let selected;
let goodDogs = [{ name: 'Roger' }, { name: 'Syd' }];
</script>
<select bind:value={selected}>
{#each goodDogs as goodDog}
<option value={goodDog}>{goodDog.name}</option>
{/each}
</select>
Other Bindings
Svelte provides several other types of bindings depending on the HTML tag you are working with. Some examples include bind:files
for type="file"
input elements, bind:open
for the details
HTML element, and various bindings for audio
and video
media tags.
You can also bind textContent
and innerHTML
on contenteditable
fields.
Read-only Bindings
Certain properties like offsetWidth
, offsetHeight
, clientWidth
, and clientHeight
can be bound as read-only on block-level HTML elements.
Getting a Reference to HTML Elements
Using bind:this
, you can get a reference to an HTML element and bind it to a JavaScript variable. This is useful when you need to apply logic to elements after they are mounted, for example, using the onMount()
lifecycle event callback.
<script>
let myInputField;
</script>
<input bind:this={myInputField} />
Binding Component Props
With bind:
, you can bind a value to any prop exposed by a component. For example:
<script>
import Car from './Car.svelte';
let carInMovement;
</script>
<Car bind:inMovement={carInMovement} />
{carInMovement}
This allows you to pass data between components and create interesting scenarios.
In conclusion, bindings in Svelte make it easy to establish a two-way connection between data and the UI, particularly when working with forms. By using these bindings effectively, you can create powerful and interactive web applications.