In Svelte, we can bind the input’s value attribute to a variable. The value of the input is stored in this variable. Any changes made to the input’s value will be reflected in the variable. We can get the input’s value by simply making use of this variable.
This way Svelte provides a two-way binding between the state, that is, the variable and the input value.
To establish this binding we make use of bind:value attribute.
Let’s look at an example,
<script>
let name = "";
</script>
<input type="text" bind:value={name} />
<p>{name}</p>
In the above example, we have declared a variable name and initialized it with an empty string.
Next, we have declared an input element of type text. We make use of the bind:value directive to bind the value of the input to the name variable. With this, any changes you make in the input will be reflected in the name variable and vice versa.
We have also declared a paragraph that will display the name variable.
The output of the above code will look something like this:
That’s it! 🙂