diff --git a/src/app/shared/components/component-checkbox-item/component-checkbox-item.component.html b/src/app/shared/components/component-checkbox-item/component-checkbox-item.component.html
index f4c057480..ff00f2d6d 100644
--- a/src/app/shared/components/component-checkbox-item/component-checkbox-item.component.html
+++ b/src/app/shared/components/component-checkbox-item/component-checkbox-item.component.html
@@ -3,7 +3,8 @@
     variant="filled"
     binary="true"
     [inputId]="item().id"
-    [(ngModel)]="item().checked"
+    [ngModel]="item().checked"
+    (ngModelChange)="onCheckboxChange($event)"
     [disabled]="item().disabled"
   ></p-checkbox>
 
diff --git a/src/app/shared/components/component-checkbox-item/component-checkbox-item.component.ts b/src/app/shared/components/component-checkbox-item/component-checkbox-item.component.ts
index 785ddd5dc..a7d3ed756 100644
--- a/src/app/shared/components/component-checkbox-item/component-checkbox-item.component.ts
+++ b/src/app/shared/components/component-checkbox-item/component-checkbox-item.component.ts
@@ -19,4 +19,8 @@ import { InfoIconComponent } from '../info-icon/info-icon.component';
 export class ComponentCheckboxItemComponent {
   item = model.required<ComponentCheckboxItemModel>();
   tooltipText = input('');
+
+  onCheckboxChange(checked: boolean) {
+    this.item.set({ ...this.item(), checked });
+  }
 }
diff --git a/src/app/shared/components/components-selection-list/components-selection-list.component.html b/src/app/shared/components/components-selection-list/components-selection-list.component.html
index 79a10012a..3096ee159 100644
--- a/src/app/shared/components/components-selection-list/components-selection-list.component.html
+++ b/src/app/shared/components/components-selection-list/components-selection-list.component.html
@@ -21,7 +21,11 @@
     />
   </div>
 
-  @for (item of components(); track item.id) {
-    <osf-component-checkbox-item [item]="item" [tooltipText]="disabledTooltip()" />
+  @for (item of components(); track item.id; let idx = $index) {
+    <osf-component-checkbox-item
+      [item]="item"
+      [tooltipText]="disabledTooltip()"
+      (itemChange)="onItemChange($event, idx)"
+    />
   }
 </div>
diff --git a/src/app/shared/components/components-selection-list/components-selection-list.component.ts b/src/app/shared/components/components-selection-list/components-selection-list.component.ts
index 9e57b2ae6..8cde80d41 100644
--- a/src/app/shared/components/components-selection-list/components-selection-list.component.ts
+++ b/src/app/shared/components/components-selection-list/components-selection-list.component.ts
@@ -31,6 +31,13 @@ export class ComponentsSelectionListComponent {
       .every((item) => !item.checked)
   );
 
+  onItemChange(changedItem: ComponentCheckboxItemModel, index: number) {
+    const updatedComponents = [...this.components()];
+    updatedComponents[index] = { ...changedItem };
+
+    this.components.set(updatedComponents);
+  }
+
   removeAll() {
     const filteredItems = this.components().map((item) => ({ ...item, checked: item.disabled ? item.checked : false }));