Checkbox and radio bindings in Svelte - Step-by-Step Execution

Concept Flow - Checkbox and radio bindings

User clicks checkbox/radio

↓

Svelte updates bound variable

↓

Component re-renders with new state

↓

UI reflects updated checked state

When a user clicks a checkbox or radio button, Svelte updates the bound variable automatically, then re-renders the component to show the new checked state.

Execution Sample

Svelte

<script>
  let selected = '';
  let checked = false;
</script>
<input type="checkbox" bind:checked={checked}>
<input type="radio" bind:group={selected} value="A">

This code binds a checkbox to a boolean and a radio button to a string variable, updating variables on user interaction.

Execution Table

Step	User Action	Variable Before	Variable After	UI Checked State
1	Page loads	checked: false, selected: ''	checked: false, selected: ''	Checkbox unchecked, Radio none selected
2	User clicks checkbox	checked: false	checked: true	Checkbox checked
3	User clicks radio 'A'	selected: ''	selected: 'A'	Radio 'A' selected
4	User clicks checkbox again	checked: true	checked: false	Checkbox unchecked
5	User clicks radio 'A' again	selected: 'A'	selected: 'A'	Radio 'A' remains selected

💡 No more user actions; variables reflect last UI state.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5
checked	false	true	true	false	false
selected	''	''	'A'	'A'	'A'

Key Moments - 3 Insights

Why does the checkbox variable 'checked' change when I click it?

Because the checkbox uses bind:checked, Svelte automatically updates the 'checked' variable when the user clicks, as shown in execution_table step 2.

Why does the radio variable 'selected' change only when I click a radio button?

The radio uses bind:group, so 'selected' updates only when a radio button in the group is clicked, as seen in execution_table step 3.

Why doesn't clicking the radio button again change the variable?

Clicking the already selected radio doesn't change the variable because it is already set to that value, shown in execution_table step 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'checked' after step 4?

A undefined

B true

C false

D null

💡 Hint

Check the 'Variable After' column for step 4 in the execution_table.

At which step does the 'selected' variable first change from empty string to 'A'?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Look at the 'Variable After' column for 'selected' in execution_table rows.

If the user never clicks the checkbox, what will be the value of 'checked' after step 5?

A true

B false

C undefined

D null

💡 Hint

Refer to variable_tracker for 'checked' when no checkbox clicks occur.

Concept Snapshot

Checkbox and radio bindings in Svelte:
- Use bind:checked for checkboxes (boolean variable).
- Use bind:group for radio buttons (shared string variable).
- User clicks update variables automatically.
- UI updates reflect variable changes instantly.
- No manual event handling needed.

Full Transcript

This visual execution shows how Svelte binds checkboxes and radio buttons to variables. When the page loads, variables are at their initial values. Clicking the checkbox toggles the 'checked' boolean variable, and clicking a radio button sets the 'selected' string variable. The UI updates automatically to reflect these changes. Re-clicking a selected radio does not change the variable. This behavior is tracked step-by-step in the execution table and variable tracker, helping beginners see how user actions affect state and UI in Svelte.

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