Group bindings in Svelte - Mini Project: Build & Apply

Group Bindings in Svelte

📖 Scenario: You are building a simple survey form where users can select their favorite fruits from a list. You want to collect all selected fruits in a single variable using Svelte's group binding feature.

🎯 Goal: Create a Svelte component that shows a list of checkboxes for fruits. Use group binding to keep track of all selected fruits in one array variable.

📋 What You'll Learn

Create an array variable called selectedFruits to hold selected fruit names.

Display checkboxes for the fruits: Apple, Banana, Cherry, Date.

Use Svelte's bind:group directive to bind all checkboxes to selectedFruits.

Show the list of selected fruits below the checkboxes.

💡 Why This Matters

🌍 Real World

Group bindings are useful in forms where users select multiple options, like surveys, preferences, or filters.

💼 Career

Understanding group bindings helps you build interactive, user-friendly forms in Svelte, a popular modern web framework.

1

Set up the fruits array

Create a variable called fruits and set it to an array with these exact strings: 'Apple', 'Banana', 'Cherry', 'Date'.

Svelte

# Your code here

Need a hint?

Use let fruits = [...] to create the array with the exact fruit names.

2

Create the selectedFruits array

Add a variable called selectedFruits and set it to an empty array [] to hold the selected fruits.

Svelte

let fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
# Your code here

Need a hint?

Use let selectedFruits = []; to create an empty array for selections.

3

Add checkboxes with group binding

Write a {#each} block to loop over fruits. For each fruit, create a checkbox input with type="checkbox" and bind it to selectedFruits using bind:group={selectedFruits}. Also add a label showing the fruit name.

Svelte

let fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
let selectedFruits = [];

Need a hint?

Use {#each fruits as fruit} to loop. Inside, create a checkbox with bind:group={selectedFruits} and value={fruit}.

4

Display selected fruits

Below the checkboxes, add a paragraph that shows the text Selected fruits: followed by the selected fruits joined by commas using {selectedFruits.join(', ')}.

Svelte

let fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
let selectedFruits = [];

{#each fruits as fruit}
  
     {fruit}
  
{/each}

Need a hint?

Use a paragraph tag with {selectedFruits.join(', ')} to show the selected fruits separated by commas.