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.