Bindings (1/5)
How do you bind an input field to a variable?

    In Svelte, you can **bind the value of an input field to a variable** using the `bind:value` directive. This creates a two-way binding: updating the input updates the variable, and updating the variable updates the input.

    Example: Text Input Binding

    Here, typing into the input field automatically updates the `name` variable, and the paragraph below reflects the current value of `name`.

    You can bind other input types as well:
    • `checkbox`: `bind:checked={isChecked}`
    • `radio`: `bind:group={selectedOption}`
    • `number`: `bind:value={count}`
    • `range`: `bind:value={rangeValue}`
    • `textarea`: `bind:value={text}`
    Best practices for bindings:
    • Use `bind:value` for two-way data binding on form elements.
    • Bindings automatically keep the variable and input value in sync.
    • Avoid unnecessary bindings if the value is static or one-way.
    • Bindings work seamlessly with reactive statements (`$:`) and stores.