Checkbox and radio bindings in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when selecting multiple checkboxes?

Consider this Svelte component with checkboxes bound to an array. What will be the value of selected after checking "Apple" and "Cherry"?

Svelte

<script>
  let selected = [];
</script>

<label><input type="checkbox" bind:group={selected} value="Apple"> Apple</label>
<label><input type="checkbox" bind:group={selected} value="Banana"> Banana</label>
<label><input type="checkbox" bind:group={selected} value="Cherry"> Cherry</label>

A ["Banana", "Cherry"]

B ["Apple"]

C []

D ["Apple", "Cherry"]

💡 Hint

Checkboxes bound with bind:group add or remove values from the array.

When you check "Apple" and "Cherry", their values are added to the selected array. So the array contains both strings.

❓ component_behavior

intermediate

What is the value of a radio button binding?

Given this Svelte radio button group bound to choice, what is the value of choice after selecting the "Blue" option?

Svelte

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

<label><input type="radio" bind:group={choice} value="Red"> Red</label>
<label><input type="radio" bind:group={choice} value="Blue"> Blue</label>
<label><input type="radio" bind:group={choice} value="Green"> Green</label>

A "Blue"

B undefined

C "Green"

D "Red"

💡 Hint

Radio buttons bound with bind:group set the variable to the selected value.

Selecting the "Blue" radio button updates choice to "Blue".

📝 Syntax

advanced

Which option correctly binds multiple checkboxes to an array?

Which of the following Svelte code snippets correctly binds multiple checkboxes to an array named fruits?

A <input type="checkbox" bind:group={fruits} value="Apple">

B <input type="checkbox" bind:group={fruits} checked>

C <input type="checkbox" bind:checked={fruits} value="Apple">

D <input type="checkbox" bind:value={fruits} value="Apple">

💡 Hint

Use bind:group to bind checkboxes to an array.

Only bind:group correctly binds multiple checkboxes to an array. The others either bind a single value or are invalid.

🔧 Debug

advanced

Why does this radio button binding not update the variable?

This Svelte code tries to bind a radio group to color, but selecting options does not update color. What is the problem?

Svelte

<script>
  let color = "red";
</script>

<label><input type="radio" bind:group={color} value="red"> Red</label>
<label><input type="radio" bind:group={color} value="green"> Green</label>
<label><input type="radio" bind:group={color} value="blue"> Blue</label>

<!-- The variable color never changes on selection -->

A The <code>bind:group</code> is correct but the <code>value</code> attributes are missing quotes.

B The <code>value</code> attributes are strings but <code>color</code> is a number.

C The <code>value</code> attributes are lowercase strings but <code>color</code> initial value is lowercase string, so it should work.

D The variable <code>color</code> is declared with lowercase but values use uppercase.

💡 Hint

Check if the binding syntax and value types match.

The code is correct and should update color. If it does not, the problem is likely outside this snippet or a misunderstanding.

❓ state_output

expert

What is the final state of the array after toggling checkboxes?

Given this Svelte component, what is the value of selected after the user checks "Banana", then "Apple", then unchecks "Banana"?

Svelte

<script>
  let selected = [];
</script>

<label><input type="checkbox" bind:group={selected} value="Apple"> Apple</label>
<label><input type="checkbox" bind:group={selected} value="Banana"> Banana</label>
<label><input type="checkbox" bind:group={selected} value="Cherry"> Cherry</label>

A ["Banana", "Apple"]

B ["Apple"]

C ["Banana"]

D []

💡 Hint

Checkboxes add or remove their value from the array when toggled.

Checking "Banana" adds it, then "Apple" adds it, then unchecking "Banana" removes it, leaving only "Apple".