Handling Inputs with Svelte

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Svelte is an up and coming front end framework for developing front end web apps.

It’s simple to use and lets us create results fast.

In this article, we’ll look at how to handle text inputs in Svelte components.

Data Bindings

We can bind input values to variables in our components with the bind:value directive.

To use it we can write the following:

App.svelte :

<script>
  let name = "";
</script>

<input bind:value={name}>

<p>{name}</p>

In the code above, we used the bind:value directive to bind the input’s value to the name variable in our component.

Therefore, when we type into the input, the value will be shown in the p element below the input.

In the DOM, everything is a string. We have to convert the inputted values to the value that we want before using it.

bind:value takes care of that.

For example, if we write:

<script>
  let a = 1;
</script>

<label>
  <input type=number bind:value={a} min=0 max=10>
</label>
<br>
<label>
  <input type=range bind:value={a} min=0 max=10>
</label>

Then we’ll see both inputs change if we type in a value to the number input or change the slider value.

Checkbox Inputs

Svelte can handle checkbox inputs. So we can get the checked values from checkboxes easily.

For example, we can write the following code:

<script>
  let yes = false;
</script>

<input type=checkbox bind:checked={yes}>
<p>{yes}</p>

and we’ll see the value in the p tag change as we check and uncheck the checkbox since we have the bind:checked attribute to bind the checked value to the yes variable.

Group Inputs

We can use the bind:group directive to bind the values of the group to one value.

For instance, this is useful for radio buttons since a group of radio buttons shares one value. Only one can be selected at a time.

To make a radio button group with bind:group , we can write the following:

<script>
 let fruits = ["apple", "grape", "orange"];
 let selectedFruit = "";
</script>

{#each fruits as fruit}
<label>
  <input type=radio bind:group={selectedFruit} value={fruit} >
  {fruit}
  <br>
</label>
{/each}
<p>{selectedFruit}</p>

In the code above, we have bind:group to bind to the selectedFruit , which has the selected value of the group.

We set the value attribute of each radio button to fruit so that when we click it, Svelte will set the value of selectedFruit to the value that we set to value .

Therefore, when we click a radio button, we’ll see the selected value of the radio button group in the p element.

Also, only one radio button is selected at one time.

Textarea Inputs

Text area inputs work like text inputs. For instance, we can write:

<script>
 let text = "";
</script>

<textarea bind:value={text}></textarea>
<p>{text}</p>

bind:value bind the value entered in the textarea to the value text .

Then we get text displayed in the p tag.

Select Bindings

We can bind value from select elements by writing the following code:

<script>
  let selected = "";
  let names = [
    { id: 1, name: "Jane" },
    { id: 2, name: "John" },
    { id: 3, name: "Mary" }
  ];
</script>

<select bind:value={selected} >
{#each names as name}
  <option value={name}>
    {name.name}
  </option>
{/each}
</select>
<p>{selected.name}</p>

In the code above, we passed in the whole name object into the value prop.

Then when we select an option, we’ll see selected set to the selected choice and we can display the name property to display the name.

Multiple Selection

We can select multiple items from select elements with the multiple attribute set.

For instance, we can write the following code:

<script>
   let selected = "";
   let fruits = ["apple", "orange", "grape"];
</script>

<select bind:value={selected} multiple >
{#each fruits as fruit}
  <option value={fruit}>
    {fruit}
  </option>
{/each}
</select>
<p>{selected}</p>

All we had to do is pass selected to the bind:value directive, then Svelte will automatically get all the selected values.

Therefore, when we choose one or more values from the list, we’ll see them displayed in the p element.

Contenteditable Bindings

Any element with contenteditable set to true can bind to variables in our code.

For instance, we can write:

<script>
   let html = "";
</script>

<style>
      [contenteditable] {
        height: 200px;
        width: 90vw;
      }
</style>

<div
  contenteditable="true"
  bind:innerHTML={html}
></div>
<p>{html}</p>

In the code above, we set our div's contenteditable attribute to true . Then we use bind:innerHTML to bind to the html variable.

Since we have contenteditable set to true , we can type into it, and have the inputted value displayed in the p tag since bind does the data binding.

Each Bindings

Binding to elements in the each block will mutate the values of the entry that’s being modified.

For instance, if we have:

<script>
  let todos = [
    { done: false, text: "eat" },
    { done: false, text: "drink" },
    { done: false, text: "sleep" }
  ];

$: remaining = todos.filter(t => !t.done).length;
</script>

<h1>Todos</h1>

{#each todos as todo}
  <div class:done={todo.done}>
    <input
      type=checkbox
      bind:checked={todo.done}
    >

    <input
      placeholder="What needs to be done?"
      bind:value={todo.text}
    >
  </div>
{/each}

<p>{remaining} remaining</p>

Then when we change the value of the input or the checkbox, they’ll be reflected in the template.

For instance, remaining will be updated as we check and uncheck the checkboxes.

Conclusion

We can bind our inputted values from various controls to variables’ values with the bind directive.

It works with any native form element in addition to anything that has the contenteditable attribute set to true .