Svelte's `bind:`: Two-Way Data Binding Made Simple

Why it exists

In UI development, you constantly need to sync a variable's value with a user-facing element, like a form input. The standard pattern is one-way data flow (state updates UI) plus an event handler (UI updates state). Svelte's bind: directive was created to eliminate the boilerplate of writing this event handler manually, simplifying this common UI task.

The mental model

Think of bind: as creating a direct, two-way link between a variable and an element's property. Normally, data flows down from your script to the template. bind: opens a second lane for data to flow back up from the template to your script whenever the user interacts with the element. It's syntactic sugar for a value prop and an update event listener rolled into one.

How it works

The Svelte compiler transforms a bind:property={variable} directive into the necessary code. For an <input>, it sets the input's value property and adds an on:input event listener. When the user types, the listener fires and updates the variable in your script. This reactivity then flows back down, ensuring the UI and state are always synchronized. The shorthand bind:value is identical to bind:value={value}.

When to use it

Use bind: extensively for form elements: bind:value for text/number inputs, bind:checked for checkboxes, and bind:group for radio button groups. It's also useful for media elements (e.g., bind:currentTime on a <video>), getting element dimensions (e.g., bind:clientWidth), and creating two-way bindings on your own component props.

When not to use it

Avoid bind: when you need complex logic or validation before updating state. While Svelte 5.9+ offers function bindings for this, a traditional value={...} prop paired with an on:input handler gives you more explicit control. Also, be aware of readonly bindings like clientWidth; you can only read from them, not set them.

One canonical example

The most common use case is syncing an input with a state variable. Consider this code: <script> let name = 'world'; </script> <input bind:value={name}> <h1>Hello {name}!</h1>. In this example, typing in the input field directly updates the name variable, which in turn updates the text in the <h1> tag. The data flows from user input, to script state, and back to the rendered output seamlessly.