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
.