Bind A Value#
Use bind when an input should update state as the visitor types:
<script> let quantity = 1;</script><input type="number" min="1" bind="{{ quantity }}"><p>Quantity: {{ quantity }}</p>bind="{{ quantity }}" compiles to Svelte's bind:value={quantity}.
Bind A Specific Property#
For checkboxes and other controls, bind the property Svelte expects:
<script> let enabled = false;</script><label> <input type="checkbox" bind:checked="{{ enabled }}"> Enabled</label>The same shape works for other Svelte binding properties, such as bind:group="{{ value }}".
Use The Short Name Form#
You can bind a value by name:
<input type="text" bind="search">That is the same as binding the input value to search. If search is not declared in the script block, TemplateX creates browser-side state for it.
Use Native Svelte Binding#
Native Svelte binding syntax works too:
<script> let quantity = 1;</script><input type="number" bind:value={quantity}><p>{quantity}</p>Use native binding when the surrounding markup is already written in Svelte syntax.