Input bindings (bind:value) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when typing in the input?

Consider this Svelte component:

<script>
  let name = '';
</script>

<input bind:value={name} />
<p>Hello {name}!
What will the paragraph show after typing Anna in the input?

Svelte

<script>
  let name = '';
</script>

<input bind:value={name} />
<p>Hello {name}!</p>

A Hello Anna!

B Hello !

C Hello {name}!

D Hello undefined!

💡 Hint

The bind:value keeps the variable updated with the input's content.

The bind:value directive links the input's value to the variable 'name'. When you type 'Anna', 'name' updates immediately, so the paragraph shows 'Hello Anna!'.

❓ state_output

intermediate

What is the value of 'count' after clicking the button twice?

Given this Svelte component:

<script>
  let count = 0;
</script>

<input type="number" bind:value={count} />
<button on:click={() => count += 1}>Add 1</button>
<p>Count is {count}</p>

If the user clicks the button two times without changing the input manually, what will the paragraph show?

Svelte

<script>
  let count = 0;
</script>

<input type="number" bind:value={count} />
<button on:click={() => count += 1}>Add 1</button>
<p>Count is {count}</p>

A Count is 2

B Count is 0

C Count is 1

D Count is NaN

💡 Hint

The button increases the count variable by 1 each click.

The count starts at 0. Each button click adds 1. After two clicks, count is 2, so the paragraph shows 'Count is 2'.

📝 Syntax

advanced

Which option correctly binds a checkbox to a boolean variable?

You want to bind a checkbox input to a boolean variable checked in Svelte. Which code snippet is correct?

A <input type="checkbox" bind:value={checked} />

B <input type="checkbox" bind:checked />

C <input type="checkbox" bind:checked={checked} />

D <input type="checkbox" bind:value checked={checked} />

💡 Hint

Checkboxes use bind:checked, not bind:value.

For checkboxes, Svelte uses bind:checked to link the boolean variable to the checkbox state. bind:value is for text inputs.

🔧 Debug

advanced

Why does this input not update the variable?

Look at this Svelte code:

<script>
  let text = '';
</script>

<input bind:value=text />
<p>Text: {text}</p>

Typing in the input does not update the paragraph. What is the problem?

Svelte

<script>
  let text = '';
</script>

<input bind:value=text />
<p>Text: {text}</p>

A Variable 'text' is not declared

B Missing curly braces around 'text' in bind:value

C Input tag is missing a closing slash

D Paragraph does not use {text} correctly

💡 Hint

bind:value expects an expression inside curly braces.

In Svelte, bind:value requires curly braces around the variable name to bind properly. Without them, it treats 'text' as a string literal, so the variable does not update.

🧠 Conceptual

expert

What happens when binding a number input to a string variable?

Consider this Svelte code:

<script>
  let age = '';
</script>

<input type="number" bind:value={age} />
<p>Age is {age} ({typeof age})</p>

If the user types 30 in the input, what will the paragraph show?

Svelte

<script>
  let age = '';
</script>

<input type="number" bind:value={age} />
<p>Age is {age} ({typeof age})</p>

A Age is NaN (number)

B Age is 30 (number)

C Age is 30 (undefined)

D Age is 30 (string)

💡 Hint

bind:value on number inputs still binds as string by default.

Even though the input type is number, bind:value binds the value as a string. So typing 30 sets age to the string '30', not the number 30.