Bindings

11/09/2024 by zavos.dev

Hey there, fellow Svelte enthusiasts!
I will include all parts of a chapter into a single post which makes my life a little bit easier while working with the svelte.dev tutorial.

What is binding?


  • In Svelte, binding is a mechanism that establishes a two-way connection between a component's property and the value of an HTML element attribute or a JavaScript variable.
  • This means that when the value of the property changes, the corresponding HTML element attribute or JavaScript variable is automatically updated, and vice versa.
  • Binding is achieved using the bind directive, which is applied to the element attribute or JavaScript variable.

Text inputs

We are using the bind:value directive which allows us to replace the name value to anything that we type on the field.


Name:

Hello Kostas!


Numeric inputs

The same applies with numeric values. Svelte takes care of it for you by using bind:value.




1 + 2 = 12


Checkbox inputs

We are using bind:checked instead of binding to input.value



WARNING: You must opt in to continue. If you're not paying, you're the product.




Select bindings

We can also use bind:value with select elements


Insecurity questions:



Selected question [waiting...]


Group inputs

If you have multiple types input, such as type='radio' or type="checkbox", leading to the same value you can use bind:group along with the value


Size



Flavours



Please select at least one flavour



Select multiple

You can also use a select element which can have the multiple attribute, which will populate an array rather than selecting a single value





Press and hold the control key (or the command key on MacOS) to select multiple options.


Text area inputs

The text area element behaves similarly to a text input in Svelte - use bind:value


input


output