Svelte Data Binding

Data binding connects a variable in your script directly to an element on the page, keeping both sides in sync automatically. A change on either side updates the other side right away.

Why Data Binding Matters

Without binding, showing a variable inside an input box needs a listener for typing along with manual code to keep the variable and the input matched. Binding removes this extra work by linking the two sides directly.

Binding A Text Input

<script>
  let username = "";
</script>

<input bind:value={username} />
<p>You typed: {username}</p>

Typing inside the input box updates username instantly, and the paragraph below reflects each keystroke without any extra event handling code.

Two-Way Binding Diagram

Input Box                     Variable
------------                  ------------
Visitor types "R"   -------->  username = "R"
Visitor types "i"    -------->  username = "Ri"
username set in code -------->  Input box shows new value

The arrows point in both directions, showing that either side of the connection can trigger an update on the other side.

Binding A Checkbox

<script>
  let isSubscribed = false;
</script>

<input type="checkbox" bind:checked={isSubscribed} />
<p>Subscribed: {isSubscribed}</p>

Checking the box sets isSubscribed to true, and unchecking it sets the value back to false. The paragraph updates to match the checkbox state at all times.

Binding A Select Dropdown

<script>
  let selectedColor = "Red";
</script>

<select bind:value={selectedColor}>
  <option>Red</option>
  <option>Blue</option>
  <option>Green</option>
</select>
<p>Chosen color: {selectedColor}</p>

Picking a different option updates selectedColor to match the new choice, and the paragraph reflects the change without a separate change handler written by hand.

Binding Numeric Input

<script>
  let quantity = 1;
</script>

<input type="number" bind:value={quantity} />
<p>You want {quantity} items</p>

Svelte automatically treats this value as a number rather than plain text, since the input carries a number type.

Binding To A Group Of Radio Buttons

<script>
  let plan = "Basic";
</script>

<label><input type="radio" bind:group={plan} value="Basic" /> Basic</label>
<label><input type="radio" bind:group={plan} value="Premium" /> Premium</label>
<p>Selected plan: {plan}</p>

Selecting one radio button automatically deselects the other, and plan updates to hold whichever value matches the currently selected option.

Binding To A Textarea

A textarea element binds the same way a text input does, using bind:value to keep a variable in sync with whatever a visitor types across multiple lines.

<script>
  let feedback = "";
</script>

<textarea bind:value={feedback}></textarea>
<p>Character count: {feedback.length}</p>

The paragraph below updates its character count with every keystroke, since feedback stays in sync with the textarea content at all times.

Binding Component Props Between Files

Binding also works between a parent and a child component, letting a value flow both ways instead of only downward through a regular prop.

<Slider bind:value={volume} />

Changing the value inside the Slider component updates volume in the parent automatically, while changing volume in the parent also updates what the Slider component displays.

Key Points

• Binding links a variable directly to a form element without manual event code
• bind:value works for text inputs, dropdowns, and numeric inputs
• bind:checked works for checkboxes
• bind:group manages a set of radio buttons sharing one selected value