Group bindings in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte group binding example?

Consider this Svelte component using group binding with checkboxes:

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

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

<p>Selected: {selected.join(', ')}</p>

If the user checks only the "banana" and "cherry" boxes, what will be displayed inside the <p> tag?

A Selected: apple

B Selected: apple, banana, cherry

C Selected: banana, cherry

D Selected:

💡 Hint

Group binding collects all checked values into the array.

Only the checked checkboxes add their values to the selected array. Since "banana" and "cherry" are checked, the output lists those two.

❓ state_output

intermediate

What is the value of the bound variable after toggling checkboxes?

Given this Svelte snippet:

<script>
  let fruits = ['apple'];
</script>

<input type="checkbox" bind:group={fruits} value="apple" /> Apple
<input type="checkbox" bind:group={fruits} value="banana" /> Banana
<input type="checkbox" bind:group={fruits} value="cherry" /> Cherry

Initially, only "apple" is checked. The user then checks "banana" and unchecks "apple". What is the value of fruits after these changes?

A ['banana']

B ['banana', 'cherry']

C ['apple', 'banana']

D ['apple']

💡 Hint

Group binding updates the array to include only checked values.

Unchecking "apple" removes it from the array. Checking "banana" adds it. "cherry" remains unchecked, so it is not included.

📝 Syntax

advanced

Which option correctly uses group binding with radio buttons in Svelte?

Choose the correct Svelte code snippet that binds a group of radio buttons to a variable color:

A

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

B

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

C

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

D

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

💡 Hint

Radio buttons use bind:group to bind a single variable to the selected value.

Option A correctly binds the color variable to the selected radio button using bind:group. Option A uses invalid syntax. Option A binds to colors which is undefined. Option A uses checkboxes instead of radios.

🔧 Debug

advanced

Why does this Svelte group binding code cause an error?

Examine this Svelte code snippet:

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

<input type="checkbox" bind:group={selected} value="one" /> One
<input type="checkbox" bind:group={selected} value="two" /> Two

When running, it throws an error. What is the cause?

A The bind:group directive is missing a colon.

B Checkbox inputs cannot use bind:group, only radio inputs can.

C The value attribute must be a number, not a string.

D The variable 'selected' must be an array, not a string, for checkbox group binding.

💡 Hint

Check the type of the variable used with bind:group for checkboxes.

Checkbox group binding requires the bound variable to be an array to hold multiple selected values. Using a string causes a runtime error.

🧠 Conceptual

expert

How does Svelte's group binding handle dynamic changes to the bound array?

In Svelte, if you bind a group of checkboxes to an array variable using bind:group, and then programmatically modify the array (e.g., add or remove values), what happens to the checkboxes?

A The checkboxes do not update; only user interaction changes their state.

B The checkboxes update automatically to reflect the current array contents, checking or unchecking accordingly.

C Modifying the array causes a runtime error because the binding is one-way.

D Only the first checkbox updates; others remain unchanged.

💡 Hint

Think about two-way binding and reactivity in Svelte.

Svelte's bind:group creates a two-way binding. Changing the array programmatically updates the checkboxes to match the array's contents automatically.