How does two-way binding work in Svelte?
Two-way binding in Svelte allows a variable to stay in sync with a form element or component property. When the input changes, the variable updates automatically, and when the variable changes, the input updates as well.
Example: Text Input
Typing in the input updates the name variable, and changing name in the script updates the input automatically.
Example: Checkbox
Example: Radio Group
Example: Bind to Child Component
Best practices for two-way binding:
Use
bind:valuefor text inputs, textareas, number inputs, and ranges.Use
bind:checkedfor checkboxes andbind:groupfor radio groups.Component props can be bound with
bind:prop={variable}for two-way communication.Two-way binding automatically updates both the UI and the variable, reducing boilerplate.
Prefer two-way binding for form elements that need to reflect state dynamically.