Checkbox and radio bindings in Svelte - Mini Project: Build & Apply

Checkbox and Radio Bindings in Svelte

📖 Scenario: You are building a simple survey form for a website. The form asks users to select their favorite fruits using checkboxes and choose their preferred contact method using radio buttons.

🎯 Goal: Create a Svelte component that binds checkboxes to an array of selected fruits and radio buttons to a single selected contact method. The component should update the selections reactively as the user interacts.

📋 What You'll Learn

Create an array variable selectedFruits to hold selected fruit names.

Create a string variable contactMethod to hold the chosen contact method.

Bind multiple checkboxes to selectedFruits using Svelte's bind:group.

Bind radio buttons to contactMethod using Svelte's bind:group.

Use semantic HTML with accessible labels for all inputs.

💡 Why This Matters

🌍 Real World

Forms with checkboxes and radio buttons are common in surveys, preferences, and settings pages on websites and apps.

💼 Career

Understanding how to bind inputs to variables in frameworks like Svelte is essential for building interactive user interfaces in modern web development.

1

Set up the selected fruits array

Create a variable called selectedFruits and set it to an empty array [].

Svelte

# Create a variable called selectedFruits and set it to an empty array []

# Your code here

Hint

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

2

Add the contact method variable

Create a variable called contactMethod and set it to an empty string "".

Svelte

let selectedFruits = [];

# Create a variable called contactMethod and set it to an empty string ""

# Your code here

Hint

Use let contactMethod = ""; to create a string variable for the radio buttons.

3

Bind checkboxes to selectedFruits

Add three checkboxes with labels for Apple, Banana, and Cherry. Bind their group to the variable selectedFruits using bind:group={selectedFruits}. Use value attributes exactly as "Apple", "Banana", and "Cherry".

Svelte

let selectedFruits = [];
let contactMethod = "";



# Your code here

Hint

Use <input type="checkbox" bind:group={selectedFruits} value="Apple" /> for each fruit checkbox.

4

Bind radio buttons to contactMethod

Add two radio buttons with labels for Email and Phone. Bind their group to the variable contactMethod using bind:group={contactMethod}. Use value attributes exactly as "Email" and "Phone".

Svelte

let selectedFruits = [];
let contactMethod = "";

 Apple
 Banana
 Cherry



# Your code here

Hint

Use <input type="radio" bind:group={contactMethod} value="Email" /> for each radio button.

Practice

1. In Svelte, which binding is used to track whether a single checkbox is checked or not?

easy

A. bind:group

B. bind:value

C. bind:checked

D. bind:selected

Solution

1. Step 1: Understand checkbox binding

   Checkboxes in Svelte use bind:checked to track true/false state.

2. Step 2: Differentiate from other bindings

   bind:value is for input values, bind:group is for radio or multiple checkboxes, bind:selected is invalid.

3. Final Answer:

   <code>bind:checked</code> -> Option C

4. Quick Check:

   Checkbox true/false = bind:checked [OK]

Hint: Checkbox true/false uses bind:checked [OK]

Common Mistakes:

• Using bind:value for checkbox state
• Confusing bind:group with bind:checked
• Trying bind:selected which doesn't exist

2. Which of the following is the correct syntax to bind a group of radio buttons to a variable color in Svelte?

easy

A. <input type='radio' bind:checked={color} value='red' />

B. <input type='radio' bind:selected={color} value='red' />

C. <input type='radio' bind:value={color} value='red' />

D. <input type='radio' bind:group={color} value='red' />

Solution

1. Step 1: Identify radio button binding

   Radio buttons use bind:group to bind multiple inputs to one variable.

2. Step 2: Check syntax correctness

   Only bind:group={color} correctly binds the group to variable color.

3. Final Answer:

   <input type='radio' bind:group={color} value='red' /> -> Option D

4. Quick Check:

   Radio group binding = bind:group [OK]

Hint: Radio buttons bind group with bind:group [OK]

Common Mistakes:

• Using bind:checked for radio groups
• Using bind:value instead of bind:group
• Using bind:selected which is invalid

3. Given this Svelte code:

<script>
  let selectedColors = [];
</script>
<input type='checkbox' bind:group={selectedColors} value='red' /> Red
<input type='checkbox' bind:group={selectedColors} value='blue' /> Blue
<input type='checkbox' bind:group={selectedColors} value='green' /> Green

<p>Selected: {JSON.stringify(selectedColors)}</p>

If the user checks 'red' and 'green', what will be displayed inside the paragraph?

medium

A. Selected: ["red", "green"]

B. Selected: ["red"]

C. Selected: [true, true]

D. Selected: red, green

Solution

1. Step 1: Understand bind:group with checkboxes

   Binding multiple checkboxes with bind:group stores selected values in an array.

2. Step 2: Check which values are selected

   User selects 'red' and 'green', so array contains ["red", "green"].

3. Final Answer:

   Selected: ["red", "green"] -> Option A

4. Quick Check:

   Checkbox group array = ["red", "green"] [OK]

Hint: Multiple checkboxes bind:group stores array of values [OK]

Common Mistakes:

• Expecting boolean array instead of values
• Confusing bind:checked with bind:group
• Outputting string instead of JSON array

4. Consider this Svelte snippet:

<script>
  let fruit = 'apple';
</script>
<input type='radio' bind:checked={fruit} value='apple' /> Apple
<input type='radio' bind:group={fruit} value='banana' /> Banana

What is the main issue with this code?

medium

A. Using bind:group with a string variable is invalid

B. Mixing bind:checked and bind:group on radio buttons causes inconsistent binding

C. Missing bind:value on radio inputs

D. Radio buttons must use bind:checked, not bind:group

Solution

1. Step 1: Identify bindings on radio buttons

   One radio uses bind:checked, the other uses bind:group on the same variable.

2. Step 2: Understand correct radio binding

   Radio buttons must all use bind:group to bind to one variable consistently.

3. Final Answer:

   Mixing bind:checked and bind:group on radio buttons causes inconsistent binding -> Option B

4. Quick Check:

   Radio group must use bind:group consistently [OK]

Hint: Use bind:group consistently for all radios in a group [OK]

Common Mistakes:

• Using bind:checked on radios instead of bind:group
• Mixing different bindings on radios
• Assuming bind:value binds radio group

5. You want to create a Svelte form where users can select multiple toppings from checkboxes and also pick a single pizza size with radio buttons. Which of the following code snippets correctly binds the toppings to an array selectedToppings and the size to a string pizzaSize?

hard

A. <script>
let selectedToppings = [];
let pizzaSize = '';
</script>
<input type='checkbox' bind:group={selectedToppings} value='pepperoni' /> Pepperoni
<input type='checkbox' bind:group={selectedToppings} value='mushrooms' /> Mushrooms
<input type='radio' bind:group={pizzaSize} value='small' /> Small
<input type='radio' bind:group={pizzaSize} value='large' /> Large

B. <script>
let selectedToppings = '';
let pizzaSize = [];
</script>
<input type='checkbox' bind:checked={selectedToppings} value='pepperoni' /> Pepperoni
<input type='checkbox' bind:checked={selectedToppings} value='mushrooms' /> Mushrooms
<input type='radio' bind:checked={pizzaSize} value='small' /> Small
<input type='radio' bind:checked={pizzaSize} value='large' /> Large

C. <script>
let selectedToppings = [];
let pizzaSize = '';
</script>
<input type='checkbox' bind:checked={selectedToppings} value='pepperoni' /> Pepperoni
<input type='checkbox' bind:checked={selectedToppings} value='mushrooms' /> Mushrooms
<input type='radio' bind:value={pizzaSize} value='small' /> Small
<input type='radio' bind:value={pizzaSize} value='large' /> Large

D. <script>
let selectedToppings = [];
let pizzaSize = '';
</script>
<input type='checkbox' bind:group={selectedToppings} value='pepperoni' /> Pepperoni
<input type='checkbox' bind:group={selectedToppings} value='mushrooms' /> Mushrooms
<input type='radio' bind:checked={pizzaSize} value='small' /> Small
<input type='radio' bind:checked={pizzaSize} value='large' /> Large

Solution

1. Step 1: Bind multiple checkboxes to an array

   Use bind:group on checkboxes to bind selected values to an array variable.

2. Step 2: Bind radio buttons to a string variable

   Use bind:group on radio buttons to bind the selected value to a string variable.

3. Step 3: Verify correct syntax in options

   <script>
     let selectedToppings = [];
     let pizzaSize = '';
   </script>
   <input type='checkbox' bind:group={selectedToppings} value='pepperoni' /> Pepperoni
   <input type='checkbox' bind:group={selectedToppings} value='mushrooms' /> Mushrooms
   <input type='radio' bind:group={pizzaSize} value='small' /> Small
   <input type='radio' bind:group={pizzaSize} value='large' /> Large

   correctly uses bind:group for both checkboxes and radios with proper variables.

4. Final Answer:

   Option A code snippet -> Option A

5. Quick Check:

   Checkbox array + radio string = bind:group [OK]

Hint: Use bind:group for checkbox arrays and radio groups [OK]

Common Mistakes:

• Using bind:checked for multiple checkboxes array
• Using bind:checked for radio groups
• Mixing bind:value and bind:checked incorrectly