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.

Practice

1. What does bind:value do in a Svelte input element?

easy

A. It links the input's value to a variable, keeping them in sync.

B. It sets a fixed value that cannot be changed by the user.

C. It styles the input element with a CSS class named 'value'.

D. It disables the input field so the user cannot type.

Solution

1. Step 1: Understand the purpose of bind:value

   In Svelte, bind:value connects the input's value to a variable so changes in one update the other automatically.

2. Step 2: Compare options with this behavior

   Only It links the input's value to a variable, keeping them in sync. describes this syncing behavior correctly. Other options describe unrelated or incorrect behaviors.

3. Final Answer:

   It links the input's value to a variable, keeping them in sync. -> Option A

4. Quick Check:

   bind:value syncs input and variable = C [OK]

Hint: Remember: bind:value keeps input and variable synced [OK]

Common Mistakes:

• Thinking bind:value sets a fixed value
• Confusing bind:value with styling or disabling inputs
• Assuming bind:value only sets initial value

2. Which of the following is the correct syntax to bind a variable name to an input's value in Svelte?

easy

A. <input value={name} />

B. <input bind:value:name />

C. <input bind:name={value} />

D. <input bind:value={name} />

Solution

1. Step 1: Recall Svelte binding syntax

   The correct syntax to bind an input's value to a variable is bind:value={variable}.

2. Step 2: Check each option

   <input bind:value={name} /> matches the correct syntax. <input value={name} /> only sets initial value without binding. Options B and C use incorrect binding syntax.

3. Final Answer:

   <input bind:value={name} /> -> Option D

4. Quick Check:

   Correct bind:value syntax = D [OK]

Hint: Use bind:value={variable} to sync input and variable [OK]

Common Mistakes:

• Using value={name} without bind for two-way binding
• Swapping variable and value in binding
• Incorrect attribute names like bind:name

3. What will be displayed when the user types "Hello" in this Svelte component?

<script>
  let text = '';
</script>
<input bind:value={text} />
<p>You typed: {text}</p>

medium

A. You typed: {text}

B. You typed:

C. You typed: Hello

D. SyntaxError

Solution

1. Step 1: Understand bind:value behavior

   The input's value is bound to the variable text, so typing updates text immediately.

2. Step 2: Check displayed output

   The paragraph shows You typed: {text}, which updates to the current input value, here "Hello".

3. Final Answer:

   You typed: Hello -> Option C

4. Quick Check:

   Input updates variable and display = A [OK]

Hint: bind:value updates variable instantly, reflected in output [OK]

Common Mistakes:

• Expecting static text without updates
• Thinking {text} shows literally instead of variable value
• Assuming syntax error due to binding

4. Identify the error in this Svelte code snippet:

<script>
  let age = 30;
</script>
<input bind:value=age />

medium

A. Variable age cannot be a number

B. Missing curly braces around variable in bind:value

C. bind:value should be bind:age

D. Input tag must be self-closed with a semicolon

Solution

1. Step 1: Check bind:value syntax

   In Svelte, the variable must be inside curly braces: bind:value={age}.

2. Step 2: Validate other options

   Variable age cannot be a number is wrong because numbers can be bound. bind:value should be bind:age uses wrong attribute. Input tag must be self-closed with a semicolon is invalid HTML advice.

3. Final Answer:

   Missing curly braces around variable in bind:value -> Option B

4. Quick Check:

   bind:value requires braces = B [OK]

Hint: Always wrap variables in {} inside bind:value [OK]

Common Mistakes:

• Omitting curly braces in binding
• Confusing bind:value with bind:variable
• Thinking variable type matters for binding syntax

5. You want to create a form with two inputs bound to variables firstName and lastName. You also want to show the full name updating live as the user types. Which Svelte code correctly achieves this?

<script>
  let firstName = '';
  let lastName = '';
</script>

<!-- Options below -->

hard

A. <input bind:value={firstName} placeholder="First" />
<input bind:value={lastName} placeholder="Last" />
<p>Full name: {firstName} {lastName}</p>

B. <input value={firstName} placeholder="First" />
<input value={lastName} placeholder="Last" />
<p>Full name: {firstName} {lastName}</p>

C. <input bind:firstName={value} placeholder="First" />
<input bind:lastName={value} placeholder="Last" />
<p>Full name: {firstName} {lastName}</p>

D. <input bind:value={firstName} placeholder="First" />
<input bind:value={lastName} placeholder="Last" />
<p>Full name: {firstName + lastName}</p>

Solution

1. Step 1: Check input bindings for firstName and lastName

   <input bind:value={firstName} placeholder="First" /> <input bind:value={lastName} placeholder="Last" /> <p>Full name: {firstName} {lastName}</p> correctly uses bind:value={firstName} and bind:value={lastName} to keep inputs synced with variables.

2. Step 2: Verify full name display

   <input bind:value={firstName} placeholder="First" /> <input bind:value={lastName} placeholder="Last" /> <p>Full name: {firstName} {lastName}</p> displays full name as {firstName} {lastName}, which updates live. <input bind:value={firstName} placeholder="First" /> <input bind:value={lastName} placeholder="Last" /> <p>Full name: {firstName + lastName}</p> concatenates without space, which is less readable. Options B and C have incorrect bindings.

3. Final Answer:

   <input bind:value={firstName} placeholder="First" /> <input bind:value={lastName} placeholder="Last" /> <p>Full name: {firstName} {lastName}</p> -> Option A

4. Quick Check:

   Correct two-way binding and display = A [OK]

Hint: Use bind:value for each input and show variables with space [OK]

Common Mistakes:

• Using value= instead of bind:value for inputs
• Incorrect bind attribute names like bind:firstName
• Concatenating variables without space in display