Group bindings in Svelte - Step-by-Step Execution

Concept Flow - Group bindings

Initialize group variable

↓

Render inputs with bind:group

↓

User clicks an input

↓

Update group variable

↓

Re-render inputs with updated checked state

↩Back to User clicks an input

This flow shows how Svelte binds multiple inputs to one variable, updating it when user selects an option and re-rendering inputs accordingly.

Execution Sample

Svelte

let selected = '';

<input type="radio" bind:group={selected} value="A" />
<input type="radio" bind:group={selected} value="B" />
<p>Selected: {selected}</p>

This code binds two radio buttons to the same variable, updating 'selected' when user picks one.

Execution Table

Step	User Action	Variable 'selected' Before	Action	Variable 'selected' After	Rendered Output
1	Page loads	''	Render inputs unchecked	''	Selected:
2	User clicks radio with value 'A'	''	Update selected to 'A'	'A'	Selected: A
3	User clicks radio with value 'B'	'A'	Update selected to 'B'	'B'	Selected: B
4	User clicks radio with value 'B' again	'B'	No change	'B'	Selected: B
5	User clicks radio with value 'A'	'B'	Update selected to 'A'	'A'	Selected: A

💡 User stops interacting; variable 'selected' holds last chosen value.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5
selected	''	'A'	'B'	'B'	'A'

Key Moments - 2 Insights

Why does clicking the same radio button twice not change the variable?

Because the variable 'selected' already holds that value, so no update or re-render happens (see step 4 in execution_table).

How does Svelte know which radio button to check when 'selected' changes?

Svelte re-renders inputs and sets the 'checked' attribute on the input whose value matches 'selected' (see rendered output changes in execution_table).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'selected' after step 3?

A 'B'

B 'A'

C ''

D 'C'

💡 Hint

Check the 'Variable 'selected' After' column in row for step 3.

At which step does the variable 'selected' first change from empty to a value?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Variable 'selected' After' column and find when it changes from ''.

If we add a third radio with value 'C', what would happen when user clicks it?

A Page reloads

B 'selected' updates to 'C' and output shows Selected: C

C 'selected' stays the same

D Error occurs

💡 Hint

Based on how group binding updates variable on user clicks (see steps 2 and 3).

Concept Snapshot

Svelte group binding links multiple inputs to one variable.
Use bind:group={variable} on inputs like radios or checkboxes.
When user selects an input, variable updates automatically.
Inputs re-render to reflect variable's current value.
Great for mutually exclusive choices or multiple selections.

Full Transcript

This visual execution shows how Svelte's group binding works. Initially, the variable 'selected' is empty and no radio is checked. When the user clicks a radio input, Svelte updates 'selected' to that input's value and re-renders the inputs so the correct one is checked. Clicking the same input again does not change the variable. Adding more radios with bind:group would update the variable similarly when clicked. This binding keeps the variable and inputs in sync automatically.

Practice

1. In Svelte, what does a group binding do when used with multiple checkboxes?

easy

A. It connects all checkboxes to a single array variable that holds selected values.

B. It links each checkbox to a separate variable automatically.

C. It disables all checkboxes except one.

D. It creates a radio button group instead of checkboxes.

Solution

1. Step 1: Understand group binding with checkboxes

   Group binding in Svelte with checkboxes uses an array variable to store all selected checkbox values.

2. Step 2: Recognize the effect on state

   When a checkbox is checked or unchecked, the array updates automatically to reflect the current selections.

3. Final Answer:

   It connects all checkboxes to a single array variable that holds selected values. -> Option A

4. Quick Check:

   Checkbox group binding = array variable [OK]

Hint: Checkbox groups bind to arrays holding all selected values [OK]

Common Mistakes:

• Thinking each checkbox needs its own variable
• Confusing checkbox groups with radio groups
• Assuming group binding disables inputs

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

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Svelte group binding syntax

   For radio buttons, Svelte uses bind:group to connect all radios to one variable.

2. Step 2: Match syntax with options

   uses bind:group={selected}, which is the correct syntax for radio groups.

3. Final Answer:

   <input type="radio" bind:group={selected} value="A"> -> Option A

4. Quick Check:

   Radio group binding syntax = bind:group [OK]

Hint: Use bind:group for radio button groups in Svelte [OK]

Common Mistakes:

• Using bind:value instead of bind:group
• Using bind:checked which is for single checkbox
• Incorrect attribute order or spelling

3. Consider this Svelte code snippet:

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

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

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

If the user checks Apple and Cherry, what will be displayed inside the <p> tag?

medium

A. Selected: {apple, cherry}

B. Selected: ["banana"]

C. Selected: apple,cherry

D. Selected: ["apple", "cherry"]

Solution

1. Step 1: Understand checkbox group binding behavior

   When checkboxes are bound to an array, each checked box's value is added to the array.

2. Step 2: Identify selected checkboxes and output format

   User checked Apple and Cherry, so array is ["apple", "cherry"]. JSON.stringify shows this as a JSON array string.

3. Final Answer:

   Selected: ["apple", "cherry"] -> Option D

4. Quick Check:

   Checkbox group array output = JSON array string [OK]

Hint: Checkbox group values appear as array strings in output [OK]

Common Mistakes:

• Expecting a comma-separated string instead of array
• Confusing selected values with unchecked ones
• Misreading JSON.stringify output format

4. This Svelte code tries to bind a group of checkboxes but does not work as expected:

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

<input type="checkbox" bind:group={selected} value="x">
<input type="checkbox" bind:group={selected} value="y">

What is the main problem here?

medium

A. The value attribute is missing from the inputs.

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

C. Checkbox inputs cannot use bind:group in Svelte.

D. bind:group only works with radio buttons, not checkboxes.

Solution

1. Step 1: Check variable type for checkbox group binding

   Checkbox group binding requires the bound variable to be an array to hold multiple selected values.

2. Step 2: Identify the error in variable initialization

   The code uses a string variable instead of an array, causing binding to fail or behave incorrectly.

3. Final Answer:

   The variable 'selected' should be an array, not a string, for checkbox group binding. -> Option B

4. Quick Check:

   Checkbox group variable must be array [OK]

Hint: Checkbox group variables must be arrays, not strings [OK]

Common Mistakes:

• Using string instead of array for checkbox group
• Thinking bind:group is only for radios
• Forgetting to set value attribute on inputs

5. You want to create a Svelte form where users select their favorite colors from checkboxes and also pick one preferred shape from radio buttons. Which is the best way to bind these inputs to variables colors and shape respectively?

hard

A. let colors = []; with bind:group={colors} on radios, and let shape = ''; with bind:group={shape} on checkboxes.

B. let colors = ''; with bind:value={colors} on checkboxes, and let shape = []; with bind:group={shape} on radios.

C. let colors = []; with bind:group={colors} on checkboxes, and let shape = ''; with bind:group={shape} on radios.

D. let colors = ''; with bind:group={colors} on checkboxes, and let shape = ''; with bind:value={shape} on radios.

Solution

1. Step 1: Assign correct variable types for inputs

   Checkbox groups bind to arrays to hold multiple selections; radio groups bind to single values (strings).

2. Step 2: Match bindings to input types

   Checkboxes use bind:group with an array variable; radios use bind:group with a string variable.

3. Final Answer:

   let colors = [] with bind:group on checkboxes, let shape = '' with bind:group on radios -> Option C

4. Quick Check:

   Checkboxes = array, radios = string with bind:group [OK]

Hint: Checkbox groups use arrays; radio groups use single values [OK]

Common Mistakes:

• Swapping variable types between checkboxes and radios
• Using bind:value instead of bind:group for groups
• Initializing variables with wrong types