Input bindings (bind:value) in Svelte - Step-by-Step Execution

Concept Flow - Input bindings (bind:value)

User types in input field

↓

bind:value updates variable

↓

Variable changes trigger UI update

↓

Input field shows updated value

↩Back to User types

When the user types in an input, the bind:value updates the variable, which updates the UI, keeping input and variable in sync.

Execution Sample

Svelte

<script>
  let name = '';
</script>
<input bind:value={name} />
<p>Hello {name}!</p>

This code binds the input's value to the variable 'name', so typing updates 'name' and the greeting updates live.

Execution Table

Step	User Input	Variable 'name' Before	Action	Variable 'name' After	UI Output
1	'' (empty)	''	Initial load	''	Hello !
2	'A'	''	User types 'A'	'A'	Hello A!
3	'Al'	'A'	User types 'l'	'Al'	Hello Al!
4	'Ali'	'Al'	User types 'i'	'Ali'	Hello Ali!
5	'Alice'	'Ali'	User types 'ce'	'Alice'	Hello Alice!
6	''	'Alice'	User clears input	''	Hello !

💡 User stops typing; variable and UI remain synced with input value.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
name	''	''	'A'	'Al'	'Ali'	'Alice'	''

Key Moments - 2 Insights

Why does the UI update immediately when I type in the input?

Because bind:value links the input's value and the variable 'name' directly, so when the input changes (see execution_table steps 2-5), the variable updates and the UI re-renders with the new value.

What happens if I change the variable 'name' in code instead of typing?

The input field will update to show the new value because bind:value keeps the input and variable in sync both ways, as shown in the concept flow where variable changes update the UI.

Visual Quiz - 3 Questions

Look at the execution table at step 3. What is the value of 'name' after the user types?

A 'A'

B 'Al'

C ''

D 'Ali'

💡 Hint

Check the 'Variable 'name' After' column in row for step 3.

At which step does the variable 'name' become empty again?

A Step 6

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'Variable 'name' After' column for when it changes back to empty.

If the user types 'Bob' instead of 'Alice', how would the UI output change at step 5?

A Hello !

B Hello Alice!

C Hello Bob!

D Hello Ali!

💡 Hint

The UI output matches the variable 'name' after user input, see execution_table step 5.

Concept Snapshot

Svelte's bind:value links an input's value to a variable.
Typing updates the variable instantly.
Changing the variable updates the input.
Keeps UI and data in sync automatically.
Use <input bind:value={variable}> for two-way binding.

Full Transcript

This example shows how Svelte's bind:value works. When the user types in the input field, the variable 'name' updates immediately. This change triggers the UI to update the greeting text to say 'Hello' plus the current name. If the user clears the input, the variable becomes empty and the greeting updates accordingly. This two-way binding keeps the input and variable always in sync without extra code.