Handling Inputs with Svelte
Tags: svelte, webdev, programming, javascript
Published: 2021-01-28 21:39:15

**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` .