Svelte Two Way Data Binding Example

Hello dev, in this tutorial we will see two way data binding in svelte. In svelte bind:value is use for two way data bind. we can bind elements like form input. textarea, checkbox, select input with the help of bind:value.

Svelte Two Way Data Bind Example

1) Simple text input form data bind.

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

<main>
    <h1> {name}!</h1>
    <input bind:value={name} /> 
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        margin: 0 auto;
    }
</style>

svelte data bind form

2) Svelte Two way data binding in select input form.

<script>
    let color = '';
</script>

<main>

    <select bind:value={color}>
        <option value="" disabled>Select A Color</option>
        <option>Green</option>
        <option>Red</option>
        <option>Yellow</option>
    </select>
    <p> Select Color: {color}</p>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        margin: 0 auto;
    }
</style>

svelte data bind in select form input