/

Svelte Bindings: A Guide to Working with Bindings in Svelte

Svelte Bindings: A Guide to Working with Bindings in Svelte

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:

1
2
3
4
5
<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 or var to define the variable, not const, as const 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 the indeterminate state of an element.

Here are examples of each type of binding:

1
2
3
4
5
6
7
8
9
<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:

1
2
3
4
5
6
7
8
9
<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:

1
2
3
4
5
6
7
8
9
10
<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.

1
2
3
4
5
<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:

1
2
3
4
5
6
7
8
9
<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.

tags: [“Svelte”, “Web Framework”, “Bindings”, “Forms”, “Two-way Binding”]