diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/.prettierrc.js b/packages/pluggableWidgets/checkbox-radio-selection-web/.prettierrc.js
new file mode 100644
index 0000000000..0892704ab0
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/.prettierrc.js
@@ -0,0 +1 @@
+module.exports = require("@mendix/prettier-config-web-widgets");
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/CHANGELOG.md b/packages/pluggableWidgets/checkbox-radio-selection-web/CHANGELOG.md
new file mode 100644
index 0000000000..9b2f61be93
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/CHANGELOG.md
@@ -0,0 +1,11 @@
+# Changelog
+
+All notable changes to this widget will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+
+- Initial release of Checkbox Radio Selection widget
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/README.md b/packages/pluggableWidgets/checkbox-radio-selection-web/README.md
new file mode 100644
index 0000000000..538552a435
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/README.md
@@ -0,0 +1,42 @@
+# Checkbox Radio Selection
+
+A widget for displaying radio button lists (single selection) and checkbox lists (multiple selection) based on different data sources.
+
+## Features
+
+- **Single Selection**: Radio button list for exclusive selection
+- **Multiple Selection**: Checkbox list for multiple selection
+- **Data Sources**: Support for context (association), database, and static data
+- **Custom Content**: Ability to add custom content for options
+- **Accessibility**: Full accessibility support with ARIA labels and keyboard navigation
+
+## Configuration
+
+The widget supports various data source types:
+
+- **Context**: Use associations from your entity
+- **Database**: Query database for selectable objects
+- **Static**: Define static values directly in the widget
+
+## Usage
+
+1. Add the Checkbox Radio Selection widget to your page
+2. Configure the data source (Context, Database, or Static)
+3. Set up caption and value attributes
+4. Configure selection method (single or multiple)
+5. Customize styling and accessibility options
+
+For detailed configuration options, please refer to the widget properties in Studio Pro.
+
+## Browser Support
+
+- Modern browsers supporting ES6+
+- Internet Explorer 11+ (with polyfills)
+
+## Development
+
+This widget is built using:
+
+- React 18+
+- TypeScript
+- Mendix Pluggable Widgets API
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/e2e/SelectionControls.spec.js b/packages/pluggableWidgets/checkbox-radio-selection-web/e2e/SelectionControls.spec.js
new file mode 100644
index 0000000000..09ce0eeda4
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/e2e/SelectionControls.spec.js
@@ -0,0 +1,65 @@
+import { test, expect } from "@playwright/test";
+
+test.afterEach("Cleanup session", async ({ page }) => {
+    // Because the test isolation that will open a new session for every test executed, and that exceeds Mendix's license limit of 5 sessions, so we need to force logout after each test.
+    await page.evaluate(() => window.mx.session.logout());
+});
+
+test.describe("checkbox-radio-selection-web", () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto("p/CheckboxRadioSelection");
+        await page.waitForLoadState("networkidle");
+    });
+
+    test.describe("data source types", () => {
+        test("renders checkbox radio selection using association", async ({ page }) => {
+            const selectionControls = page.locator(".mx-name-checkboxRadioSelection1");
+            await expect(selectionControls).toBeVisible({ timeout: 10000 });
+            await expect(selectionControls).toHaveScreenshot(`checkboxRadioSelectionAssociation.png`);
+        });
+
+        test("renders checkbox radio selection using enum", async ({ page }) => {
+            const selectionControls = page.locator(".mx-name-checkboxRadioSelection2");
+            await expect(selectionControls).toBeVisible({ timeout: 10000 });
+            await expect(selectionControls).toHaveScreenshot(`checkboxRadioSelectionEnum.png`);
+        });
+
+        test("renders checkbox radio selection using boolean", async ({ page }) => {
+            const selectionControls = page.locator(".mx-name-checkboxRadioSelection3");
+            await expect(selectionControls).toBeVisible({ timeout: 10000 });
+            await expect(selectionControls).toHaveScreenshot(`checkboxRadioSelectionBoolean.png`);
+        });
+
+        test("renders checkbox radio selection using static values", async ({ page }) => {
+            const selectionControls = page.locator(".mx-name-checkboxRadioSelection4");
+            await expect(selectionControls).toBeVisible({ timeout: 10000 });
+            await expect(selectionControls).toHaveScreenshot(`checkboxRadioSelectionStatic.png`);
+        });
+
+        test("renders checkbox radio selection using database", async ({ page }) => {
+            const selectionControls = page.locator(".mx-name-checkboxRadioSelection5");
+            await expect(selectionControls).toBeVisible({ timeout: 10000 });
+            await expect(selectionControls).toHaveScreenshot(`checkboxRadioSelectionDatabase.png`);
+        });
+
+        test.describe("selection behavior", () => {
+            test("handles radio button selection", async ({ page }) => {
+                const selectionControls = page.locator(".mx-name-checkboxRadioSelection1");
+                await expect(selectionControls).toBeVisible({ timeout: 10000 });
+
+                const radioOption = selectionControls.locator('input[type="radio"]').first();
+                await radioOption.click();
+                await expect(radioOption).toBeChecked();
+            });
+
+            test("handles checkbox selection", async ({ page }) => {
+                const selectionControls = page.locator(".mx-name-checkboxRadioSelection6"); // multi selection
+                await expect(selectionControls).toBeVisible({ timeout: 10000 });
+
+                const checkboxOption = selectionControls.locator('input[type="checkbox"]').first();
+                await checkboxOption.click();
+                await expect(checkboxOption).toBeChecked();
+            });
+        });
+    });
+});
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/eslint.config.mjs b/packages/pluggableWidgets/checkbox-radio-selection-web/eslint.config.mjs
new file mode 100644
index 0000000000..ed68ae9e78
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/eslint.config.mjs
@@ -0,0 +1,3 @@
+import config from "@mendix/eslint-config-web-widgets/widget-ts.mjs";
+
+export default config;
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/package.json b/packages/pluggableWidgets/checkbox-radio-selection-web/package.json
new file mode 100644
index 0000000000..925d807edf
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/package.json
@@ -0,0 +1,65 @@
+{
+    "name": "@mendix/checkbox-radio-selection-web",
+    "widgetName": "CheckboxRadioSelection",
+    "version": "1.0.0",
+    "description": "Configurable radio buttons and check box widget",
+    "copyright": "© Mendix Technology BV 2025. All rights reserved.",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/mendix/web-widgets.git"
+    },
+    "config": {
+        "developmentPort": 3000,
+        "mendixHost": "http://localhost:8080"
+    },
+    "mxpackage": {
+        "name": "CheckboxRadioSelection",
+        "type": "widget",
+        "mpkName": "com.mendix.widget.web.CheckboxRadioSelection.mpk"
+    },
+    "packagePath": "com.mendix.widget.web",
+    "marketplace": {
+        "minimumMXVersion": "10.7.0",
+        "appNumber": 219304,
+        "appName": "Checkbox Radio Selection",
+        "reactReady": true
+    },
+    "testProject": {
+        "githubUrl": "https://github.com/mendix/testProjects",
+        "branchName": "checkbox-radio-selection-web"
+    },
+    "scripts": {
+        "prebuild": "rui-create-translation",
+        "build": "pluggable-widgets-tools build:web",
+        "create-gh-release": "rui-create-gh-release",
+        "create-translation": "rui-create-translation",
+        "dev": "pluggable-widgets-tools start:web",
+        "e2e": "run-e2e ci",
+        "e2edev": "run-e2e dev --with-preps",
+        "format": "prettier --ignore-path ./node_modules/@mendix/prettier-config-web-widgets/global-prettierignore --write .",
+        "lint": "eslint src/ package.json",
+        "publish-marketplace": "rui-publish-marketplace",
+        "release": "pluggable-widgets-tools release:web",
+        "start": "pluggable-widgets-tools start:server",
+        "test": "pluggable-widgets-tools test:unit:web:enzyme-free",
+        "update-changelog": "rui-update-changelog-widget",
+        "verify": "rui-verify-package-format"
+    },
+    "dependencies": {
+        "classnames": "^2.3.2"
+    },
+    "devDependencies": {
+        "@mendix/automation-utils": "workspace:*",
+        "@mendix/eslint-config-web-widgets": "workspace:*",
+        "@mendix/pluggable-widgets-tools": "*",
+        "@mendix/prettier-config-web-widgets": "workspace:*",
+        "@mendix/run-e2e": "workspace:^*",
+        "@mendix/widget-plugin-component-kit": "workspace:*",
+        "@mendix/widget-plugin-grid": "workspace:*",
+        "@mendix/widget-plugin-hooks": "workspace:*",
+        "@mendix/widget-plugin-platform": "workspace:*",
+        "@mendix/widget-plugin-test-utils": "workspace:*",
+        "cross-env": "^7.0.3"
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/playwright.config.cjs b/packages/pluggableWidgets/checkbox-radio-selection-web/playwright.config.cjs
new file mode 100644
index 0000000000..29045fc372
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/playwright.config.cjs
@@ -0,0 +1 @@
+module.exports = require("@mendix/run-e2e/playwright.config.cjs");
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/rollup.config.js b/packages/pluggableWidgets/checkbox-radio-selection-web/rollup.config.js
new file mode 100644
index 0000000000..48e21a9f79
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/rollup.config.js
@@ -0,0 +1,20 @@
+const { join } = require("path");
+const { cp, mkdir, rm } = require("shelljs");
+
+const sourcePath = process.cwd();
+const outDir = join(sourcePath, "/dist/tmp/widgets/");
+
+module.exports = args => {
+    const result = args.configDefaultConfig;
+
+    const localesDir = join(outDir, "locales/");
+    mkdir("-p", localesDir);
+
+    const translationFiles = join(sourcePath, "dist/locales/**/*");
+    // copy everything under dist/locales to dist/tmp/widgets/locales for the widget mpk
+    cp("-r", translationFiles, localesDir);
+    // remove root level *.json locales files (duplicate with language specific files (e.g. en-US/*.json))
+    rm("-f", join(outDir, "locales/*.json"), localesDir);
+
+    return result;
+};
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.dark.png b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.dark.png
new file mode 100644
index 0000000000..91d519192d
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.dark.png
@@ -0,0 +1,2 @@
+// Placeholder for SelectionControls.dark.png - widget icon for dark mode
+// In a real implementation, this would be a proper PNG image file 
\ No newline at end of file
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorConfig.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorConfig.ts
new file mode 100644
index 0000000000..15043ebbd5
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorConfig.ts
@@ -0,0 +1,222 @@
+import { Properties, hideNestedPropertiesIn, hidePropertiesIn } from "@mendix/pluggable-widgets-tools";
+import {
+    ContainerProps,
+    StructurePreviewProps,
+    structurePreviewPalette,
+    dropzone,
+    container,
+    rowLayout,
+    text,
+    svgImage
+} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
+import { CheckboxRadioSelectionPreviewProps } from "../typings/CheckboxRadioSelectionProps";
+import { getCustomCaption } from "./helpers/utils";
+import IconRadioButtonSVG from "./assets/radiobutton.svg";
+import IconCheckboxSVG from "./assets/checkbox.svg";
+
+const DATABASE_SOURCE_CONFIG: Array<keyof CheckboxRadioSelectionPreviewProps> = [
+    "optionsSourceDatabaseCaptionAttribute",
+    "optionsSourceDatabaseCaptionExpression",
+    "optionsSourceDatabaseCaptionType",
+    "optionsSourceDatabaseCustomContent",
+    "optionsSourceDatabaseDataSource",
+    "optionsSourceDatabaseValueAttribute",
+    "optionsSourceDatabaseItemSelection",
+    "databaseAttributeString",
+    "onChangeDatabaseEvent"
+];
+
+const ASSOCIATION_SOURCE_CONFIG: Array<keyof CheckboxRadioSelectionPreviewProps> = [
+    "optionsSourceAssociationCaptionAttribute",
+    "optionsSourceAssociationCaptionExpression",
+    "optionsSourceAssociationCaptionType",
+    "optionsSourceAssociationCustomContent",
+    "optionsSourceAssociationDataSource",
+    "attributeAssociation"
+];
+
+export function getProperties(
+    values: CheckboxRadioSelectionPreviewProps & { Editability?: unknown },
+    defaultProperties: Properties
+): Properties {
+    // Basic property hiding logic - can be expanded later
+    if (values.source !== "database") {
+        hidePropertiesIn(defaultProperties, values, ["customEditability", "customEditabilityExpression"]);
+    }
+
+    if (values.source === "context") {
+        hidePropertiesIn(defaultProperties, values, [
+            "staticAttribute",
+            "optionsSourceStaticDataSource",
+            ...DATABASE_SOURCE_CONFIG
+        ]);
+        if (["enumeration", "boolean"].includes(values.optionsSourceType)) {
+            hidePropertiesIn(defaultProperties, values, [
+                "optionsSourceCustomContentType",
+                ...ASSOCIATION_SOURCE_CONFIG
+            ]);
+            if (values.optionsSourceType === "boolean") {
+                hidePropertiesIn(defaultProperties, values, ["attributeEnumeration"]);
+            } else {
+                hidePropertiesIn(defaultProperties, values, ["attributeBoolean"]);
+            }
+        } else if (values.optionsSourceType === "association") {
+            hidePropertiesIn(defaultProperties, values, ["attributeEnumeration", "attributeBoolean"]);
+            if (values.optionsSourceAssociationCaptionType === "attribute") {
+                hidePropertiesIn(defaultProperties, values, ["optionsSourceAssociationCaptionExpression"]);
+            } else {
+                hidePropertiesIn(defaultProperties, values, ["optionsSourceAssociationCaptionAttribute"]);
+            }
+
+            if (values.optionsSourceAssociationDataSource === null) {
+                hidePropertiesIn(defaultProperties, values, ["optionsSourceAssociationCaptionType"]);
+            }
+
+            if (values.optionsSourceCustomContentType === "no") {
+                hidePropertiesIn(defaultProperties, values, ["optionsSourceAssociationCustomContent"]);
+            }
+        }
+    } else if (values.source === "database") {
+        hidePropertiesIn(defaultProperties, values, [
+            "attributeEnumeration",
+            "attributeBoolean",
+            "optionsSourceType",
+            "staticAttribute",
+            "optionsSourceStaticDataSource",
+            "onChangeEvent",
+            ...ASSOCIATION_SOURCE_CONFIG
+        ]);
+        if (values.optionsSourceDatabaseDataSource === null) {
+            hidePropertiesIn(defaultProperties, values, ["optionsSourceDatabaseCaptionType"]);
+        }
+        if (values.optionsSourceDatabaseCaptionType === "attribute") {
+            hidePropertiesIn(defaultProperties, values, ["optionsSourceDatabaseCaptionExpression"]);
+        } else {
+            hidePropertiesIn(defaultProperties, values, ["optionsSourceDatabaseCaptionAttribute"]);
+        }
+        if (values.optionsSourceCustomContentType === "no") {
+            hidePropertiesIn(defaultProperties, values, ["optionsSourceDatabaseCustomContent"]);
+        }
+        if (values.optionsSourceDatabaseItemSelection === "Multi") {
+            hidePropertiesIn(defaultProperties, values, [
+                "optionsSourceDatabaseValueAttribute",
+                "databaseAttributeString"
+            ]);
+        }
+        if (values.databaseAttributeString.length === 0) {
+            hidePropertiesIn(defaultProperties, values, ["optionsSourceDatabaseValueAttribute"]);
+            hidePropertiesIn(defaultProperties, values, ["Editability"]);
+            if (values.customEditability !== "conditionally") {
+                hidePropertiesIn(defaultProperties, values, ["customEditabilityExpression"]);
+            }
+        } else {
+            hidePropertiesIn(defaultProperties, values, ["customEditability", "customEditabilityExpression"]);
+        }
+    } else if (values.source === "static") {
+        hidePropertiesIn(defaultProperties, values, [
+            "attributeEnumeration",
+            "attributeBoolean",
+            "optionsSourceType",
+            ...ASSOCIATION_SOURCE_CONFIG,
+            ...DATABASE_SOURCE_CONFIG
+        ]);
+    }
+
+    if (values.optionsSourceCustomContentType === "no") {
+        values.optionsSourceStaticDataSource.forEach((_, index) => {
+            hideNestedPropertiesIn(defaultProperties, values, "optionsSourceStaticDataSource", index, [
+                "staticDataSourceCustomContent"
+            ]);
+        });
+    }
+
+    return defaultProperties;
+}
+
+function getIconPreview(isMultiSelect: boolean): ContainerProps {
+    return container({ grow: 0 })(
+        container({ padding: 3 })(),
+        svgImage({ width: 16, height: 16, grow: 0 })(
+            decodeURIComponent(
+                (isMultiSelect ? IconCheckboxSVG : IconRadioButtonSVG).replace("data:image/svg+xml,", "")
+            )
+        )
+    );
+}
+
+export function getPreview(values: CheckboxRadioSelectionPreviewProps, isDarkMode: boolean): StructurePreviewProps {
+    const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
+    const structurePreviewChildren: StructurePreviewProps[] = [];
+    let readOnly = values.readOnly;
+
+    // Handle custom content dropzones when enabled
+    if (values.optionsSourceCustomContentType !== "no") {
+        if (values.source === "context" && values.optionsSourceType === "association") {
+            structurePreviewChildren.push(
+                dropzone(
+                    dropzone.placeholder("Configure the checkbox radio selection: Place widgets here"),
+                    dropzone.hideDataSourceHeaderIf(false)
+                )(values.optionsSourceAssociationCustomContent)
+            );
+        } else if (values.source === "database") {
+            structurePreviewChildren.push(
+                dropzone(
+                    dropzone.placeholder("Configure the checkbox radio selection: Place widgets here"),
+                    dropzone.hideDataSourceHeaderIf(false)
+                )(values.optionsSourceDatabaseCustomContent)
+            );
+
+            if (values.databaseAttributeString.length === 0) {
+                readOnly = values.customEditability === "never";
+            }
+        } else if (values.source === "static") {
+            values.optionsSourceStaticDataSource.forEach(value => {
+                structurePreviewChildren.push(
+                    container({
+                        borders: true,
+                        borderWidth: 1,
+                        borderRadius: 2
+                    })(
+                        dropzone(
+                            dropzone.placeholder(
+                                `Configure the checkbox radio selection: Place widgets for option ${value.staticDataSourceCaption} here`
+                            ),
+                            dropzone.hideDataSourceHeaderIf(false)
+                        )(value.staticDataSourceCustomContent)
+                    )
+                );
+            });
+        }
+    }
+
+    // Handle database-specific read-only logic
+    // if (values.source === "database" && values.databaseAttributeString.length === 0) {
+    //     readOnly = values.customEditability === "never";
+    // }
+
+    // If no custom content dropzones, show default preview
+    if (structurePreviewChildren.length === 0) {
+        const isMultiSelect = values.optionsSourceDatabaseItemSelection === "Multi";
+        return container()(
+            rowLayout({
+                columnSize: "grow",
+                borderRadius: 2,
+                backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.container
+            })(
+                getIconPreview(isMultiSelect),
+                container()(container({ padding: 3 })(), text()(getCustomCaption(values)))
+            )
+        );
+    }
+
+    // Return container with dropzones
+    return container()(
+        rowLayout({
+            columnSize: "grow",
+            borders: true,
+            borderWidth: 1,
+            borderRadius: 2,
+            backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.container
+        })(container({ grow: 1, padding: 4 })(...structurePreviewChildren))
+    );
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorPreview.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorPreview.tsx
new file mode 100644
index 0000000000..c277bdfe64
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorPreview.tsx
@@ -0,0 +1,52 @@
+import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
+import { ReactElement, createElement, useMemo } from "react";
+import { CheckboxRadioSelectionPreviewProps } from "../typings/CheckboxRadioSelectionProps";
+import { RadioSelection } from "./components/RadioSelection/RadioSelection";
+import { dynamic } from "@mendix/widget-plugin-test-utils";
+import { SingleSelector, SelectionBaseProps, MultiSelector } from "./helpers/types";
+import { StaticPreviewSelector } from "./helpers/Static/Preview/StaticPreviewSelector";
+import {
+    DatabaseMultiPreviewSelector,
+    DatabasePreviewSelector
+} from "./helpers/Database/Preview/DatabasePreviewSelector";
+import { AssociationPreviewSelector } from "./helpers/Association/Preview/AssociationPreviewSelector";
+import "./ui/CheckboxRadioSelection.scss";
+import "./ui/CheckboxRadioSelectionPreview.scss";
+import { CheckboxSelection } from "./components/CheckboxSelection/CheckboxSelection";
+
+export const preview = (props: CheckboxRadioSelectionPreviewProps): ReactElement => {
+    const id = generateUUID().toString();
+    const commonProps: Omit<SelectionBaseProps<null>, "selector"> = {
+        tabIndex: 1,
+        inputId: id,
+        labelId: `${id}-label`,
+        readOnlyStyle: props.readOnlyStyle,
+        ariaRequired: dynamic(false),
+        groupName: dynamic(`${id}-group`)
+    };
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const selector: SingleSelector | MultiSelector = useMemo(() => {
+        if (props.source === "static") {
+            return new StaticPreviewSelector(props);
+        }
+        if (props.source === "database") {
+            if (props.optionsSourceDatabaseItemSelection === "Multi") {
+                return new DatabaseMultiPreviewSelector(props);
+            } else {
+                return new DatabasePreviewSelector(props);
+            }
+        }
+        return new AssociationPreviewSelector(props);
+    }, [props]);
+
+    return (
+        <div className="widget-checkbox-radio-selection widget-checkbox-radio-selection-editor-preview">
+            {selector.type === "single" ? (
+                <RadioSelection selector={selector} {...commonProps} />
+            ) : (
+                <CheckboxSelection selector={selector} {...commonProps} />
+            )}
+        </div>
+    );
+};
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.icon.png b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.icon.png
new file mode 100644
index 0000000000..21f35fc022
Binary files /dev/null and b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.icon.png differ
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.png b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.png
new file mode 100644
index 0000000000..3879a20612
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.png
@@ -0,0 +1,2 @@
+// Placeholder for SelectionControls.png - widget icon
+// In a real implementation, this would be a proper PNG image file 
\ No newline at end of file
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tile.dark.png b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tile.dark.png
new file mode 100644
index 0000000000..a3d5da808d
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tile.dark.png
@@ -0,0 +1,2 @@
+// Placeholder for SelectionControls.tile.dark.png - widget tile icon for dark mode
+// In a real implementation, this would be a proper PNG image file 
\ No newline at end of file
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tile.png b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tile.png
new file mode 100644
index 0000000000..cc15910ddc
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tile.png
@@ -0,0 +1,2 @@
+// Placeholder for SelectionControls.tile.png - widget tile icon
+// In a real implementation, this would be a proper PNG image file 
\ No newline at end of file
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tsx
new file mode 100644
index 0000000000..2f15c500ae
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tsx
@@ -0,0 +1,35 @@
+import { createElement, ReactElement } from "react";
+
+import { CheckboxRadioSelectionContainerProps } from "../typings/CheckboxRadioSelectionProps";
+
+import { CheckboxSelection } from "./components/CheckboxSelection/CheckboxSelection";
+import { Placeholder } from "./components/Placeholder";
+import { RadioSelection } from "./components/RadioSelection/RadioSelection";
+import { SelectionBaseProps } from "./helpers/types";
+import { useGetSelector } from "./hooks/useGetSelector";
+
+import "./ui/CheckboxRadioSelection.scss";
+
+export default function CheckboxRadioSelection(props: CheckboxRadioSelectionContainerProps): ReactElement {
+    const selector = useGetSelector(props);
+    const commonProps: Omit<SelectionBaseProps<null>, "selector"> = {
+        tabIndex: props.tabIndex!,
+        inputId: props.id,
+        labelId: `${props.id}-label`,
+        readOnlyStyle: props.readOnlyStyle,
+        ariaRequired: props.ariaRequired,
+        groupName: props.groupName
+    };
+
+    return (
+        <div className="widget-checkbox-radio-selection">
+            {selector.status === "unavailable" ? (
+                <Placeholder />
+            ) : selector.type === "single" ? (
+                <RadioSelection selector={selector} {...commonProps} />
+            ) : (
+                <CheckboxSelection selector={selector} {...commonProps} />
+            )}
+        </div>
+    );
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.xml b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.xml
new file mode 100644
index 0000000000..4d0ec5f3d3
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.xml
@@ -0,0 +1,266 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<widget id="com.mendix.widget.web.checkboxradioselection.CheckboxRadioSelection" pluginWidget="true" offlineCapable="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
+    <name>Checkbox Radio Selection</name>
+    <description />
+    <studioProCategory>Input elements</studioProCategory>
+    <studioCategory>Display</studioCategory>
+    <helpUrl>https://docs.mendix.com/appstore/widgets/checkboxradioselection</helpUrl>
+    <properties>
+        <propertyGroup caption="General">
+            <!-- OPTIONS SOURCE -->
+            <propertyGroup caption="Data source">
+                <property key="source" type="enumeration" defaultValue="context" required="true">
+                    <caption>Source</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="context">Context</enumerationValue>
+                        <enumerationValue key="database">Database</enumerationValue>
+                        <enumerationValue key="static">Static</enumerationValue>
+                    </enumerationValues>
+                </property>
+
+                <property key="optionsSourceType" type="enumeration" defaultValue="association" required="true">
+                    <caption>Type</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="association">Association</enumerationValue>
+                        <enumerationValue key="enumeration">Enumeration</enumerationValue>
+                        <enumerationValue key="boolean">Boolean</enumerationValue>
+                    </enumerationValues>
+                </property>
+
+                <!-- ENUM & BOOLEAN-->
+                <property key="attributeEnumeration" type="attribute" required="true" setLabel="true">
+                    <caption>Attribute</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="Enum" />
+                    </attributeTypes>
+                </property>
+                <property key="attributeBoolean" type="attribute" required="true" setLabel="true">
+                    <caption>Attribute</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="Boolean" />
+                    </attributeTypes>
+                </property>
+                <!-- END ENUM & BOOLEAN -->
+                <!-- DATABASE / STRING -->
+                <property key="optionsSourceDatabaseDataSource" type="datasource" isList="true" required="false">
+                    <caption>Selectable objects</caption>
+                    <description />
+                </property>
+                <property key="optionsSourceDatabaseItemSelection" type="selection" dataSource="optionsSourceDatabaseDataSource" onChange="onChangeDatabaseEvent">
+                    <caption>Selection type</caption>
+                    <description />
+                    <selectionTypes>
+                        <selectionType name="Single" />
+                        <selectionType name="Multi" />
+                    </selectionTypes>
+                </property>
+            </propertyGroup>
+            <propertyGroup caption="Caption">
+                <!-- CAPTIONS -->
+                <property key="optionsSourceAssociationCaptionType" type="enumeration" defaultValue="attribute">
+                    <caption>Caption type</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="attribute">Attribute</enumerationValue>
+                        <enumerationValue key="expression">Expression</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="optionsSourceDatabaseCaptionType" type="enumeration" defaultValue="attribute">
+                    <caption>Caption type</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="attribute">Attribute</enumerationValue>
+                        <enumerationValue key="expression">Expression</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="optionsSourceAssociationCaptionAttribute" type="attribute" dataSource="optionsSourceAssociationDataSource" required="true">
+                    <caption>Caption</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="String" />
+                    </attributeTypes>
+                </property>
+                <property key="optionsSourceDatabaseCaptionAttribute" type="attribute" dataSource="optionsSourceDatabaseDataSource" required="true">
+                    <caption>Caption</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="String" />
+                    </attributeTypes>
+                </property>
+                <property key="optionsSourceAssociationCaptionExpression" type="expression" dataSource="optionsSourceAssociationDataSource" required="true">
+                    <caption>Caption</caption>
+                    <description />
+                    <returnType type="String" />
+                </property>
+                <property key="optionsSourceDatabaseCaptionExpression" type="expression" dataSource="optionsSourceDatabaseDataSource" required="true">
+                    <caption>Caption</caption>
+                    <description />
+                    <returnType type="String" />
+                </property>
+                <!-- END CAPTIONS -->
+            </propertyGroup>
+            <propertyGroup caption="Store value">
+                <property key="optionsSourceDatabaseValueAttribute" type="attribute" dataSource="optionsSourceDatabaseDataSource">
+                    <caption>Value</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="String" />
+                        <attributeType name="Integer" />
+                        <attributeType name="Long" />
+                        <attributeType name="Enum" />
+                    </attributeTypes>
+                </property>
+                <property key="databaseAttributeString" type="attribute" setLabel="true" required="false">
+                    <caption>Target attribute</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="String" />
+                        <attributeType name="Integer" />
+                        <attributeType name="Long" />
+                        <attributeType name="Enum" />
+                    </attributeTypes>
+                </property>
+            </propertyGroup>
+            <!-- END DATABASE / STRING -->
+            <propertyGroup caption="Attribute">
+                <!-- ASSOCIATION -->
+                <property key="attributeAssociation" type="association" selectableObjects="optionsSourceAssociationDataSource" required="true" setLabel="true">
+                    <caption>Entity</caption>
+                    <description />
+                    <associationTypes>
+                        <associationType name="Reference" />
+                        <associationType name="ReferenceSet" />
+                    </associationTypes>
+                </property>
+                <property key="optionsSourceAssociationDataSource" type="datasource" isList="true" required="false">
+                    <caption>Selectable objects</caption>
+                    <description />
+                </property>
+            </propertyGroup>
+            <!-- END OPTIONS SOURCE -->
+            <!-- STATIC-->
+            <propertyGroup caption="Values">
+                <property key="staticAttribute" type="attribute" required="true" setLabel="true">
+                    <caption>Attribute</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="String" />
+                        <attributeType name="Enum" />
+                        <attributeType name="Integer" />
+                        <attributeType name="Long" />
+                        <attributeType name="Boolean" />
+                        <attributeType name="DateTime" />
+                        <attributeType name="Decimal" />
+                    </attributeTypes>
+                </property>
+                <property key="optionsSourceStaticDataSource" type="object" isList="true" required="true">
+                    <caption>Values</caption>
+                    <description />
+                    <properties>
+                        <propertyGroup caption="Static values">
+                            <property key="staticDataSourceValue" type="expression">
+                                <caption>Value</caption>
+                                <description>Value to be set</description>
+                                <returnType assignableTo="../staticAttribute" />
+                            </property>
+                            <property key="staticDataSourceCustomContent" type="widgets">
+                                <caption>Custom content</caption>
+                                <description />
+                            </property>
+                            <property key="staticDataSourceCaption" type="textTemplate">
+                                <caption>Caption</caption>
+                                <description>Caption to be shown</description>
+                            </property>
+                        </propertyGroup>
+                    </properties>
+                </property>
+            </propertyGroup>
+            <!-- STATIC END-->
+            <!-- GENERAL -->
+            <propertyGroup caption="General">
+                <property key="optionsSourceCustomContentType" type="enumeration" defaultValue="no" required="true">
+                    <caption>Custom content</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="yes">Yes</enumerationValue>
+                        <enumerationValue key="no">No</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="optionsSourceAssociationCustomContent" type="widgets" required="true" dataSource="optionsSourceAssociationDataSource">
+                    <caption>Custom content</caption>
+                    <description />
+                </property>
+                <property key="optionsSourceDatabaseCustomContent" type="widgets" required="true" dataSource="optionsSourceDatabaseDataSource">
+                    <caption>Custom content</caption>
+                    <description />
+                </property>
+                <!-- END MISC PROPS -->
+            </propertyGroup>
+            <!-- END GENERAL -->
+
+            <!-- SYSTEM PROPS -->
+            <propertyGroup caption="Label">
+                <systemProperty key="Label" />
+            </propertyGroup>
+
+            <propertyGroup caption="Conditional visibility">
+                <systemProperty key="Visibility" />
+            </propertyGroup>
+            <propertyGroup caption="Editability">
+                <systemProperty key="Editability" />
+                <property key="customEditability" type="enumeration" defaultValue="default">
+                    <caption>Editable</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="default">Default</enumerationValue>
+                        <enumerationValue key="never">Never</enumerationValue>
+                        <enumerationValue key="conditionally">Conditionally</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="customEditabilityExpression" type="expression" defaultValue="false">
+                    <caption>Condition</caption>
+                    <description />
+                    <returnType type="Boolean" />
+                </property>
+                <property key="readOnlyStyle" type="enumeration" defaultValue="text">
+                    <caption>Read-only style</caption>
+                    <description>How the checkbox radio selection will appear in read-only mode.</description>
+                    <enumerationValues>
+                        <enumerationValue key="bordered">Control</enumerationValue>
+                        <enumerationValue key="text">Content only</enumerationValue>
+                    </enumerationValues>
+                </property>
+            </propertyGroup>
+            <!-- END SYSTEM PROPS -->
+        </propertyGroup>
+
+        <propertyGroup caption="Events">
+            <property key="onChangeEvent" type="action" required="false">
+                <caption>On change action</caption>
+                <description />
+            </property>
+            <property key="onChangeDatabaseEvent" type="action" required="false">
+                <caption>On change action</caption>
+                <description />
+            </property>
+        </propertyGroup>
+        <propertyGroup caption="Accessibility">
+            <propertyGroup caption="Accessibility">
+                <property key="ariaRequired" type="expression" defaultValue="false">
+                    <caption>Aria required</caption>
+                    <description />
+                    <returnType type="Boolean" />
+                </property>
+                <property key="groupName" type="expression" required="false">
+                    <caption>Group name</caption>
+                    <description />
+                    <returnType type="String" />
+                </property>
+            </propertyGroup>
+        </propertyGroup>
+    </properties>
+</widget>
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/__tests__/SelectionControls.spec.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/__tests__/SelectionControls.spec.tsx
new file mode 100644
index 0000000000..485fbf2d2a
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/__tests__/SelectionControls.spec.tsx
@@ -0,0 +1,89 @@
+import { render } from "@testing-library/react";
+import { createElement } from "react";
+import { CheckboxRadioSelectionContainerProps } from "../../typings/CheckboxRadioSelectionProps";
+import CheckboxRadioSelection from "../CheckboxRadioSelection";
+
+// Mock the selector to avoid implementation dependencies for basic tests
+jest.mock("../helpers/getSelector", () => ({
+    getSelector: jest.fn(() => ({
+        type: "single",
+        status: "available",
+        readOnly: false,
+        currentId: "option1",
+        clearable: false,
+        customContentType: "no",
+        updateProps: jest.fn(),
+        setValue: jest.fn(),
+        options: {
+            status: "available",
+            searchTerm: "",
+            sortOrder: undefined,
+            datasourceFilter: undefined,
+            hasMore: false,
+            isLoading: false,
+            getAll: jest.fn(() => ["option1", "option2", "option3"]),
+            setSearchTerm: jest.fn(),
+            onAfterSearchTermChange: jest.fn(),
+            loadMore: jest.fn(),
+            _updateProps: jest.fn(),
+            _optionToValue: jest.fn(),
+            _valueToOption: jest.fn()
+        },
+        caption: {
+            get: jest.fn(value => `Caption ${value}`),
+            render: jest.fn(value => `Caption ${value}`),
+            emptyCaption: "Select an option",
+            formatter: undefined
+        }
+    }))
+}));
+
+describe("CheckboxRadioSelection", () => {
+    const defaultProps: CheckboxRadioSelectionContainerProps = {
+        name: "selectionControls1",
+        id: "selectionControls1",
+        source: "context" as const,
+        optionsSourceType: "enumeration" as const,
+        attributeEnumeration: {
+            status: "available",
+            value: "option1",
+            validation: undefined,
+            readOnly: false,
+            displayValue: "Option 1",
+            setValue: jest.fn(),
+            formatter: {
+                format: jest.fn(),
+                type: "enum"
+            },
+            universe: ["option1", "option2", "option3"]
+        } as any,
+        attributeBoolean: {} as any,
+        attributeAssociation: {} as any,
+        staticAttribute: {} as any,
+        optionsSourceStaticDataSource: [],
+        optionsSourceAssociationCaptionType: "attribute" as const,
+        optionsSourceDatabaseCaptionType: "attribute" as const,
+        optionsSourceCustomContentType: "no" as const,
+        customEditability: "default" as const,
+        customEditabilityExpression: { status: "available", value: false } as any,
+        readOnlyStyle: "bordered" as const,
+        ariaRequired: { status: "available", value: false } as any
+    };
+
+    it("renders without crashing", () => {
+        const component = render(<CheckboxRadioSelection {...defaultProps} />);
+        expect(component.container.querySelector(".widget-checkbox-radio-selection")).toBeTruthy();
+    });
+
+    it("renders placeholder when selector status is unavailable", () => {
+        // This test would need more setup to properly mock the unavailable state
+        const component = render(<CheckboxRadioSelection {...defaultProps} />);
+        expect(component.container).toBeDefined();
+    });
+
+    it("applies correct CSS class", () => {
+        const component = render(<CheckboxRadioSelection {...defaultProps} />);
+        const widget = component.container.querySelector(".widget-checkbox-radio-selection");
+        expect(widget?.className).toContain("widget-checkbox-radio-selection");
+    });
+});
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/assets/checkbox.svg b/packages/pluggableWidgets/checkbox-radio-selection-web/src/assets/checkbox.svg
new file mode 100644
index 0000000000..e9b1a6c656
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/assets/checkbox.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" fill="#264AE5" stroke="#264AE5"/>
+<mask id="path-2-inside-1_2708_47146" fill="white">
+<path d="M3 8L9.00001 1.99999L12.5779 5.57788L6.57789 11.5779L3 8Z"/>
+</mask>
+<path d="M6.57789 11.5779L5.16368 12.9921L6.57789 14.4063L7.99211 12.9921L6.57789 11.5779ZM12.5779 5.57788L11.1637 4.16367L5.16368 10.1637L6.57789 11.5779L7.99211 12.9921L13.9921 6.99209L12.5779 5.57788ZM6.57789 11.5779L7.99211 10.1637L4.41421 6.58579L3 8L1.58579 9.41421L5.16368 12.9921L6.57789 11.5779Z" fill="white" mask="url(#path-2-inside-1_2708_47146)"/>
+</svg>
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/assets/radiobutton.svg b/packages/pluggableWidgets/checkbox-radio-selection-web/src/assets/radiobutton.svg
new file mode 100644
index 0000000000..fb3def4bf0
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/assets/radiobutton.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="2.5" width="19" height="19" rx="9.5" stroke="#264AE5"/>
+<rect x="7.5" y="7" width="10" height="10" rx="5" fill="#264AE5"/>
+</svg>
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/CaptionContent.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/CaptionContent.tsx
new file mode 100644
index 0000000000..705c7f857a
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/CaptionContent.tsx
@@ -0,0 +1,22 @@
+import { createElement, PropsWithChildren, ReactElement, MouseEvent } from "react";
+
+export interface CaptionContentProps extends PropsWithChildren {
+    htmlFor?: string;
+    onClick?: (e: MouseEvent) => void;
+}
+
+export function CaptionContent(props: CaptionContentProps): ReactElement {
+    const { htmlFor, children, onClick } = props;
+    return createElement(htmlFor == null ? "span" : "label", {
+        children,
+        className: "widget-controls-caption-text",
+        htmlFor,
+        onClick: onClick
+            ? onClick
+            : htmlFor
+              ? (e: MouseEvent) => {
+                    e.preventDefault();
+                }
+              : undefined
+    });
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/CheckboxSelection/CheckboxSelection.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/CheckboxSelection/CheckboxSelection.tsx
new file mode 100644
index 0000000000..60caf0b7d2
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/CheckboxSelection/CheckboxSelection.tsx
@@ -0,0 +1,80 @@
+import classNames from "classnames";
+import { ReactElement, createElement, MouseEvent } from "react";
+import { SelectionBaseProps, MultiSelector } from "../../helpers/types";
+import { CaptionContent } from "../CaptionContent";
+
+export function CheckboxSelection({
+    selector,
+    tabIndex = 0,
+    inputId,
+    ariaRequired,
+    readOnlyStyle,
+    groupName
+}: SelectionBaseProps<MultiSelector>): ReactElement {
+    const options = selector.getOptions();
+    const currentIds = selector.currentId || [];
+    const isReadOnly = selector.readOnly;
+    const name = groupName?.value ?? inputId;
+
+    const handleChange = (optionId: string, checked: boolean): void => {
+        if (!isReadOnly) {
+            const newSelection = checked ? [...currentIds, optionId] : currentIds.filter(id => id !== optionId);
+            selector.setValue(newSelection);
+        }
+    };
+
+    return (
+        <div
+            className={classNames("widget-checkbox-radio-selection-checkbox", {
+                "widget-checkbox-radio-selection-readonly": isReadOnly,
+                [`widget-checkbox-radio-selection-readonly-${readOnlyStyle}`]: isReadOnly
+            })}
+        >
+            <div
+                className="widget-checkbox-radio-selection-checkbox-list"
+                role="group"
+                aria-labelledby={`${inputId}-label`}
+                aria-required={ariaRequired?.value}
+            >
+                {options.map((optionId, index) => {
+                    const isSelected = currentIds.includes(optionId);
+                    const checkboxId = `${inputId}-checkbox-${index}`;
+
+                    return (
+                        <div
+                            key={optionId}
+                            className={classNames("widget-checkbox-radio-selection-checkbox-item", {
+                                "widget-checkbox-radio-selection-checkbox-item-selected": isSelected
+                            })}
+                        >
+                            <input
+                                type="checkbox"
+                                id={checkboxId}
+                                name={name}
+                                value={optionId}
+                                checked={isSelected}
+                                disabled={isReadOnly}
+                                tabIndex={tabIndex}
+                                onChange={e => handleChange(optionId, e.target.checked)}
+                            />
+                            <CaptionContent
+                                onClick={(e: MouseEvent<HTMLDivElement>) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    e.nativeEvent.stopImmediatePropagation();
+                                    handleChange(optionId, !isSelected);
+                                }}
+                                htmlFor={checkboxId}
+                            >
+                                {selector.caption.render(optionId)}
+                            </CaptionContent>
+                        </div>
+                    );
+                })}
+                {options.length === 0 && (
+                    <div className="widget-checkbox-radio-selection-no-options">No options available</div>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/Placeholder.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/Placeholder.tsx
new file mode 100644
index 0000000000..c7b9a88f89
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/Placeholder.tsx
@@ -0,0 +1,9 @@
+import { ReactElement, createElement } from "react";
+
+export function Placeholder(): ReactElement {
+    return (
+        <div className="form-control widget-checkbox-radio-selection-placeholder">
+            <div className="widget-checkbox-radio-selection-placeholder-content">Loading...</div>
+        </div>
+    );
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/RadioSelection/RadioSelection.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/RadioSelection/RadioSelection.tsx
new file mode 100644
index 0000000000..2356000002
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/RadioSelection/RadioSelection.tsx
@@ -0,0 +1,81 @@
+import classNames from "classnames";
+import { ChangeEvent, ReactElement, createElement, MouseEvent } from "react";
+import { SelectionBaseProps, SingleSelector } from "../../helpers/types";
+import { CaptionContent } from "../CaptionContent";
+
+export function RadioSelection({
+    selector,
+    tabIndex = 0,
+    inputId,
+    ariaRequired,
+    readOnlyStyle,
+    groupName
+}: SelectionBaseProps<SingleSelector>): ReactElement {
+    const options = selector.options.getAll();
+    const currentId = selector.currentId;
+    const isReadOnly = selector.readOnly;
+    const name = groupName?.value ?? inputId;
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        const selectedItem = e.target.value;
+        if (!isReadOnly) {
+            selector.setValue(selectedItem);
+        }
+    };
+
+    return (
+        <div
+            className={classNames("widget-checkbox-radio-selection-radio", {
+                "widget-checkbox-radio-selection-readonly": isReadOnly,
+                [`widget-checkbox-radio-selection-readonly-${readOnlyStyle}`]: isReadOnly
+            })}
+        >
+            <div
+                className="widget-checkbox-radio-selection-radio-list"
+                role="radiogroup"
+                aria-labelledby={`${inputId}-label`}
+                aria-required={ariaRequired?.value}
+            >
+                {options.map((optionId, index) => {
+                    const isSelected = currentId === optionId;
+                    const radioId = `${inputId}-radio-${index}`;
+                    return (
+                        <div
+                            key={optionId}
+                            className={classNames("widget-checkbox-radio-selection-radio-item", {
+                                "widget-checkbox-radio-selection-radio-item-selected": isSelected
+                            })}
+                        >
+                            <input
+                                type="radio"
+                                id={radioId}
+                                name={name}
+                                value={optionId}
+                                checked={isSelected}
+                                disabled={isReadOnly}
+                                tabIndex={tabIndex}
+                                onChange={handleChange}
+                            />
+                            <CaptionContent
+                                onClick={(e: MouseEvent<HTMLDivElement>) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    e.nativeEvent.stopImmediatePropagation();
+                                    if (!isReadOnly) {
+                                        selector.setValue(optionId);
+                                    }
+                                }}
+                                htmlFor={radioId}
+                            >
+                                {selector.caption.render(optionId)}
+                            </CaptionContent>
+                        </div>
+                    );
+                })}
+                {options.length === 0 && (
+                    <div className="widget-checkbox-radio-selection-no-options">No options available</div>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationMultiSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationMultiSelector.ts
new file mode 100644
index 0000000000..720b42b39a
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationMultiSelector.ts
@@ -0,0 +1,28 @@
+import { ReferenceSetValue } from "mendix";
+import { CheckboxRadioSelectionContainerProps } from "../../../typings/CheckboxRadioSelectionProps";
+import { MultiSelector } from "../types";
+import { BaseAssociationSelector } from "./BaseAssociationSelector";
+
+export class AssociationMultiSelector
+    extends BaseAssociationSelector<string[], ReferenceSetValue>
+    implements MultiSelector
+{
+    type = "multi" as const;
+
+    updateProps(props: CheckboxRadioSelectionContainerProps): void {
+        super.updateProps(props);
+
+        // Convert reference set value to array of IDs
+        this.currentId = this._attr?.value?.map(item => item.id) ?? [];
+    }
+
+    setValue(value: string[] | null): void {
+        const newValue = value?.map(v => this.options._optionToValue(v)!);
+        this._attr?.setValue(newValue);
+        super.setValue(value);
+    }
+
+    getOptions(): string[] {
+        return this.options.getAll();
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationOptionsProvider.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationOptionsProvider.ts
new file mode 100644
index 0000000000..b68f20aea2
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationOptionsProvider.ts
@@ -0,0 +1,33 @@
+import { ListValue, ObjectItem } from "mendix";
+import { BaseOptionsProvider } from "../BaseOptionsProvider";
+import { CaptionsProvider } from "../types";
+
+export class AssociationOptionsProvider extends BaseOptionsProvider<ObjectItem | undefined, { ds: ListValue }> {
+    constructor(
+        caption: CaptionsProvider,
+        private _objectsMap: Map<string, ObjectItem>
+    ) {
+        super(caption);
+    }
+
+    _updateProps(props: { ds: ListValue }): void {
+        this._objectsMap.clear();
+        this.options = [];
+
+        if (props.ds && props.ds.status === "available") {
+            props.ds.items?.forEach(item => {
+                const key = item.id;
+                this._objectsMap.set(key, item);
+                this.options.push(key);
+            });
+        }
+    }
+
+    _optionToValue(option: string | null): ObjectItem | undefined {
+        return this._objectsMap.get(option || "");
+    }
+
+    _valueToOption(value: ObjectItem | undefined): string | null {
+        return value?.id ?? null;
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationSimpleCaptionsProvider.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationSimpleCaptionsProvider.tsx
new file mode 100644
index 0000000000..a7cff1208f
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationSimpleCaptionsProvider.tsx
@@ -0,0 +1,66 @@
+import { DynamicValue, ListAttributeValue, ListExpressionValue, ListWidgetValue, ObjectItem } from "mendix";
+import { ReactNode } from "react";
+import { OptionsSourceCustomContentTypeEnum } from "../../../typings/CheckboxRadioSelectionProps";
+import { CaptionsProvider } from "../types";
+
+interface AssociationSimpleCaptionsProviderProps {
+    emptyOptionText?: DynamicValue<string>;
+    formattingAttributeOrExpression?: ListAttributeValue<string> | ListExpressionValue<string>;
+    customContent?: ListWidgetValue;
+    customContentType: OptionsSourceCustomContentTypeEnum;
+}
+
+export class AssociationSimpleCaptionsProvider implements CaptionsProvider {
+    emptyCaption = "";
+    formatter?: ListAttributeValue<string> | ListExpressionValue<string>;
+    private _objectsMap: Map<string, ObjectItem>;
+    private customContent?: ListWidgetValue;
+    private customContentType: OptionsSourceCustomContentTypeEnum = "no";
+
+    constructor(objectsMap: Map<string, ObjectItem>) {
+        this._objectsMap = objectsMap;
+    }
+
+    updateProps(props: AssociationSimpleCaptionsProviderProps): void {
+        if (!props.emptyOptionText || props.emptyOptionText.status === "unavailable") {
+            this.emptyCaption = "";
+        } else {
+            this.emptyCaption = props.emptyOptionText.value!;
+        }
+        this.formatter = props.formattingAttributeOrExpression;
+        this.customContent = props.customContent;
+        this.customContentType = props.customContentType;
+    }
+
+    get(value: string | null): string {
+        if (value === null) {
+            return this.emptyCaption;
+        }
+
+        const item = this._objectsMap.get(value);
+        if (!item || !this.formatter) {
+            return "";
+        }
+
+        return this.formatter.get(item).value || "";
+    }
+
+    getCustomContent(value: string | null): ReactNode | null {
+        if (value === null) {
+            return null;
+        }
+        const item = this._objectsMap.get(value);
+        if (!item) {
+            return null;
+        }
+
+        return this.customContent?.get(item);
+    }
+
+    render(value: string | null): ReactNode {
+        if (this.customContentType === "yes" && this.customContent) {
+            return this.getCustomContent(value);
+        }
+        return this.get(value);
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationSingleSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationSingleSelector.ts
new file mode 100644
index 0000000000..6e3e8afbcb
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationSingleSelector.ts
@@ -0,0 +1,21 @@
+import { ReferenceValue } from "mendix";
+import { CheckboxRadioSelectionContainerProps } from "../../../typings/CheckboxRadioSelectionProps";
+import { SingleSelector } from "../types";
+import { BaseAssociationSelector } from "./BaseAssociationSelector";
+
+export class AssociationSingleSelector
+    extends BaseAssociationSelector<string, ReferenceValue>
+    implements SingleSelector
+{
+    type = "single" as const;
+
+    updateProps(props: CheckboxRadioSelectionContainerProps): void {
+        super.updateProps(props);
+        this.currentId = this._attr?.value?.id ?? null;
+    }
+
+    setValue(value: string | null): void {
+        this._attr?.setValue(this.options._optionToValue(value));
+        super.setValue(value);
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/BaseAssociationSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/BaseAssociationSelector.ts
new file mode 100644
index 0000000000..ab4729ed75
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/BaseAssociationSelector.ts
@@ -0,0 +1,72 @@
+import { ActionValue, ObjectItem, ReferenceSetValue, ReferenceValue } from "mendix";
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
+import {
+    CheckboxRadioSelectionContainerProps,
+    OptionsSourceCustomContentTypeEnum
+} from "../../../typings/CheckboxRadioSelectionProps";
+import { Status } from "../types";
+import { AssociationOptionsProvider } from "./AssociationOptionsProvider";
+import { AssociationSimpleCaptionsProvider } from "./AssociationSimpleCaptionsProvider";
+import { extractAssociationProps } from "./utils";
+
+export class BaseAssociationSelector<T extends string | string[], R extends ReferenceSetValue | ReferenceValue> {
+    status: Status = "unavailable";
+    options: AssociationOptionsProvider;
+    clearable = false;
+    currentId: T | null = null;
+    caption: AssociationSimpleCaptionsProvider;
+    readOnly = false;
+    customContentType: OptionsSourceCustomContentTypeEnum = "no";
+    validation?: string = undefined;
+    protected _attr: R | undefined;
+    private onChangeEvent?: ActionValue;
+    private _valuesMap: Map<string, ObjectItem> = new Map();
+
+    constructor() {
+        this.caption = new AssociationSimpleCaptionsProvider(this._valuesMap);
+        this.options = new AssociationOptionsProvider(this.caption, this._valuesMap);
+    }
+
+    updateProps(props: CheckboxRadioSelectionContainerProps): void {
+        const [attr, ds, captionProvider, emptyOption, clearable, onChangeEvent, customContent, customContentType] =
+            extractAssociationProps(props);
+
+        this._attr = attr as R;
+        this.caption.updateProps({
+            emptyOptionText: emptyOption,
+            formattingAttributeOrExpression: captionProvider,
+            customContent,
+            customContentType
+        });
+
+        this.options._updateProps({
+            ds
+        });
+
+        if (
+            !attr ||
+            attr.status === "unavailable" ||
+            !ds ||
+            ds.status === "unavailable" ||
+            !captionProvider ||
+            !emptyOption ||
+            emptyOption.status === "unavailable"
+        ) {
+            this.status = "unavailable";
+            this.currentId = null;
+            this.clearable = false;
+            return;
+        }
+
+        this.clearable = clearable;
+        this.status = attr.status;
+        this.readOnly = attr.readOnly;
+        this.onChangeEvent = onChangeEvent;
+        this.customContentType = customContentType;
+        this.validation = attr.validation;
+    }
+
+    setValue(_value: T | null): void {
+        executeAction(this.onChangeEvent);
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/Preview/AssociationPreviewSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/Preview/AssociationPreviewSelector.ts
new file mode 100644
index 0000000000..144866f154
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/Preview/AssociationPreviewSelector.ts
@@ -0,0 +1,40 @@
+import { SingleSelector, Status, CaptionsProvider, OptionsProvider } from "../../types";
+import {
+    CheckboxRadioSelectionPreviewProps,
+    OptionsSourceCustomContentTypeEnum
+} from "../../../../typings/CheckboxRadioSelectionProps";
+import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
+import { PreviewCaptionsProvider } from "../../Preview/PreviewCaptionsProvider";
+import { PreviewOptionsProvider } from "../../Preview/PreviewOptionsProvider";
+import { getCustomCaption } from "../../utils";
+
+export class AssociationPreviewSelector implements SingleSelector {
+    type = "single" as const;
+    status: Status = "available";
+    attributeType?: "string" | "boolean" | "big" | "date" | undefined;
+    selectorType?: "context" | "database" | "static" | undefined;
+    // type: "single";
+    readOnly: boolean;
+    validation?: string | undefined;
+    clearable: boolean = false;
+    currentId: string | null;
+    customContentType: OptionsSourceCustomContentTypeEnum;
+    caption: CaptionsProvider;
+    options: OptionsProvider;
+
+    constructor(props: CheckboxRadioSelectionPreviewProps) {
+        this.readOnly = props.readOnly;
+        this.currentId = `single-${generateUUID()}`;
+        this.customContentType = props.optionsSourceCustomContentType;
+        this.readOnly = props.readOnly;
+        this.caption = new PreviewCaptionsProvider(new Map(), getCustomCaption(props));
+        this.options = new PreviewOptionsProvider(this.caption, new Map());
+        (this.caption as PreviewCaptionsProvider).updatePreviewProps({
+            customContentRenderer: props.optionsSourceAssociationCustomContent?.renderer,
+            customContentType: props.optionsSourceCustomContentType
+        });
+    }
+
+    updateProps(): void {}
+    setValue(): void {}
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/utils.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/utils.ts
new file mode 100644
index 0000000000..747e432cf3
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/utils.ts
@@ -0,0 +1,52 @@
+import {
+    ActionValue,
+    DynamicValue,
+    ListAttributeValue,
+    ListExpressionValue,
+    ListValue,
+    ListWidgetValue,
+    ReferenceSetValue,
+    ReferenceValue,
+    ValueStatus
+} from "mendix";
+import {
+    CheckboxRadioSelectionContainerProps,
+    OptionsSourceCustomContentTypeEnum
+} from "../../../typings/CheckboxRadioSelectionProps";
+
+export function extractAssociationProps(
+    props: CheckboxRadioSelectionContainerProps
+): [
+    ReferenceValue | ReferenceSetValue,
+    ListValue,
+    ListAttributeValue<string> | ListExpressionValue<string>,
+    DynamicValue<string>,
+    boolean,
+    ActionValue | undefined,
+    ListWidgetValue | undefined,
+    OptionsSourceCustomContentTypeEnum
+] {
+    const attr = props.attributeAssociation;
+    const ds = props.optionsSourceAssociationDataSource!;
+
+    // Determine caption provider based on caption type
+    const captionProvider =
+        props.optionsSourceAssociationCaptionType === "attribute"
+            ? props.optionsSourceAssociationCaptionAttribute!
+            : props.optionsSourceAssociationCaptionExpression!;
+
+    // For simplicity, we'll create a basic empty option
+    const emptyOption: DynamicValue<string> = {
+        status: ValueStatus.Available,
+        value: ""
+    };
+
+    // Checkbox Radio Selection controls don't need clearable like combobox does
+    const clearable = false;
+
+    const onChangeEvent = props.onChangeEvent;
+    const customContent = props.optionsSourceAssociationCustomContent;
+    const customContentType = props.optionsSourceCustomContentType;
+
+    return [attr, ds, captionProvider, emptyOption, clearable, onChangeEvent, customContent, customContentType];
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/BaseOptionsProvider.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/BaseOptionsProvider.ts
new file mode 100644
index 0000000000..6a50f87ab7
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/BaseOptionsProvider.ts
@@ -0,0 +1,57 @@
+import { CaptionsProvider, OptionsProvider, Status } from "./types";
+
+export class BaseOptionsProvider<T = unknown, P = object> implements OptionsProvider<T, P> {
+    protected options: string[] = [];
+    private trigger?: () => void;
+
+    searchTerm = "";
+
+    constructor(protected caption: CaptionsProvider) {}
+
+    get hasMore(): boolean {
+        return false;
+    }
+
+    get isLoading(): boolean {
+        return false;
+    }
+
+    get status(): Status {
+        return "available";
+    }
+
+    get sortOrder(): undefined {
+        return undefined;
+    }
+
+    get datasourceFilter(): undefined {
+        return undefined;
+    }
+
+    getAll(): string[] {
+        return this.options;
+    }
+
+    setSearchTerm(term: string): void {
+        this.searchTerm = term;
+        this.trigger?.();
+    }
+
+    onAfterSearchTermChange(callback: () => void): void {
+        this.trigger = callback;
+    }
+
+    loadMore(): void {
+        return undefined;
+    }
+
+    _updateProps(_props: P): void {
+        throw new Error("_updateProps not implemented");
+    }
+    _optionToValue(_option: string | null): T | undefined {
+        throw new Error("_optionToValue not implemented");
+    }
+    _valueToOption(_value: T | undefined): string | null {
+        throw new Error("_valueToOption not implemented");
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseCaptionsProvider.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseCaptionsProvider.tsx
new file mode 100644
index 0000000000..6fe8909843
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseCaptionsProvider.tsx
@@ -0,0 +1,69 @@
+import { Big } from "big.js";
+import { DynamicValue, ListAttributeValue, ListExpressionValue, ListWidgetValue, ObjectItem } from "mendix";
+import { ReactNode } from "react";
+import { OptionsSourceCustomContentTypeEnum } from "../../../typings/CheckboxRadioSelectionProps";
+import { CaptionsProvider } from "../types";
+
+interface DatabaseCaptionsProviderProps {
+    emptyOptionText?: DynamicValue<string>;
+    formattingAttributeOrExpression?: ListAttributeValue<string> | ListExpressionValue<string>;
+    customContent?: ListWidgetValue;
+    customContentType: OptionsSourceCustomContentTypeEnum;
+    attribute?: ListAttributeValue<string | Big>;
+    caption?: string;
+}
+
+export class DatabaseCaptionsProvider implements CaptionsProvider {
+    emptyCaption = "";
+    formatter?: ListAttributeValue<string> | ListExpressionValue<string>;
+    private _objectsMap: Map<string, ObjectItem>;
+    private customContent?: ListWidgetValue;
+    private customContentType: OptionsSourceCustomContentTypeEnum = "no";
+
+    constructor(objectsMap: Map<string, ObjectItem>) {
+        this._objectsMap = objectsMap;
+    }
+
+    updateProps(props: DatabaseCaptionsProviderProps): void {
+        if (!props.emptyOptionText || props.emptyOptionText.status === "unavailable") {
+            this.emptyCaption = "";
+        } else {
+            this.emptyCaption = props.emptyOptionText.value!;
+        }
+        this.formatter = props.formattingAttributeOrExpression;
+        this.customContent = props.customContent;
+        this.customContentType = props.customContentType;
+    }
+
+    get(value: string | null): string {
+        if (value === null) {
+            return this.emptyCaption;
+        }
+
+        const item = this._objectsMap.get(value);
+        if (!item || !this.formatter) {
+            return "";
+        }
+
+        return this.formatter.get(item).value || "";
+    }
+
+    getCustomContent(value: string | null): ReactNode | null {
+        if (value === null) {
+            return null;
+        }
+        const item = this._objectsMap.get(value);
+        if (!item) {
+            return null;
+        }
+
+        return this.customContent?.get(item);
+    }
+
+    render(value: string | null): ReactNode {
+        if (this.customContentType === "yes" && this.customContent) {
+            return this.getCustomContent(value);
+        }
+        return this.get(value);
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseMultiSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseMultiSelector.ts
new file mode 100644
index 0000000000..5c146cd7a2
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseMultiSelector.ts
@@ -0,0 +1,112 @@
+import { EditableValue, ObjectItem, SelectionMultiValue } from "mendix";
+import { Big } from "big.js";
+import {
+    CheckboxRadioSelectionContainerProps,
+    OptionsSourceCustomContentTypeEnum
+} from "../../../typings/CheckboxRadioSelectionProps";
+import { MultiSelector, Status } from "../types";
+import { _valuesIsEqual } from "../utils";
+import { DatabaseCaptionsProvider } from "./DatabaseCaptionsProvider";
+import { DatabaseOptionsProvider } from "./DatabaseOptionsProvider";
+import { DatabaseValuesProvider } from "./DatabaseValuesProvider";
+import { extractDatabaseProps, getReadonly } from "./utils";
+
+export class DatabaseMultiSelector<T extends string | Big, R extends EditableValue<T>> implements MultiSelector {
+    type = "multi" as const;
+    attributeType: "string" | "big" | "boolean" | "date" = "string";
+    selectorType: "context" | "database" | "static" = "database";
+    status: Status = "unavailable";
+    options: DatabaseOptionsProvider;
+    caption: DatabaseCaptionsProvider;
+    clearable = false;
+    currentId: string[] | null = null;
+    readOnly = false;
+    customContentType: OptionsSourceCustomContentTypeEnum = "no";
+    validation?: string = undefined;
+    values: DatabaseValuesProvider;
+    protected _objectsMap: Map<string, ObjectItem> = new Map();
+    protected _attr: R | undefined;
+    private selection?: SelectionMultiValue;
+
+    constructor() {
+        this.caption = new DatabaseCaptionsProvider(this._objectsMap);
+        this.options = new DatabaseOptionsProvider(this.caption, this._objectsMap);
+        this.values = new DatabaseValuesProvider(this._objectsMap);
+    }
+
+    updateProps(props: CheckboxRadioSelectionContainerProps): void {
+        const {
+            targetAttribute,
+            captionProvider,
+            clearable,
+            customContent,
+            customContentType,
+            ds,
+            emptyOption,
+            valueSourceAttribute
+        } = extractDatabaseProps(props);
+
+        if (ds.status === "loading") {
+            return;
+        }
+
+        this._attr = targetAttribute as R;
+        this.readOnly = getReadonly(targetAttribute, props.customEditability, props.customEditabilityExpression);
+
+        this.caption.updateProps({
+            emptyOptionText: emptyOption,
+            formattingAttributeOrExpression: captionProvider,
+            customContent,
+            customContentType,
+            attribute: valueSourceAttribute,
+            caption: targetAttribute?.displayValue
+        });
+
+        this.options._updateProps({
+            ds
+        });
+
+        this.values.updateProps({
+            valueAttribute: valueSourceAttribute
+        });
+
+        if (!ds || ds.status === "unavailable" || !emptyOption || emptyOption.status !== "available") {
+            this.status = "unavailable";
+            this.currentId = null;
+            this.clearable = false;
+            return;
+        }
+
+        // For multi-selection, we need to handle arrays of values
+        if (targetAttribute?.status === "available") {
+            // In a multi-selector context, targetAttribute.value would typically be an array
+            // For now, we'll initialize as empty array
+            this.currentId = [];
+        }
+
+        this.status = targetAttribute?.status ?? ds.status;
+        this.validation = targetAttribute?.validation;
+        this.selection = props.optionsSourceDatabaseItemSelection as SelectionMultiValue;
+
+        this.clearable = clearable;
+        this.customContentType = customContentType;
+    }
+
+    setValue(objectIds: string[] | null): void {
+        // For multi-selection, we would need to handle multiple values
+        // This is a simplified implementation
+        this.currentId = objectIds;
+
+        if (this.selection) {
+            const objects =
+                objectIds
+                    ?.map(id => this.options._optionToValue(id))
+                    .filter((obj): obj is ObjectItem => obj !== undefined) || [];
+            this.selection.setSelection(objects);
+        }
+    }
+
+    getOptions(): string[] {
+        return this.options.getAll();
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseOptionsProvider.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseOptionsProvider.ts
new file mode 100644
index 0000000000..aa3aae52b4
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseOptionsProvider.ts
@@ -0,0 +1,33 @@
+import { ListValue, ObjectItem } from "mendix";
+import { BaseOptionsProvider } from "../BaseOptionsProvider";
+import { CaptionsProvider } from "../types";
+
+export class DatabaseOptionsProvider extends BaseOptionsProvider<ObjectItem | undefined, { ds: ListValue }> {
+    constructor(
+        caption: CaptionsProvider,
+        private _objectsMap: Map<string, ObjectItem>
+    ) {
+        super(caption);
+    }
+
+    _updateProps(props: { ds: ListValue }): void {
+        this._objectsMap.clear();
+        this.options = [];
+
+        if (props.ds && props.ds.status === "available") {
+            props.ds.items?.forEach(item => {
+                const key = item.id;
+                this._objectsMap.set(key, item);
+                this.options.push(key);
+            });
+        }
+    }
+
+    _optionToValue(option: string | null): ObjectItem | undefined {
+        return this._objectsMap.get(option || "");
+    }
+
+    _valueToOption(value: ObjectItem | undefined): string | null {
+        return value?.id ?? null;
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseSingleSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseSingleSelector.ts
new file mode 100644
index 0000000000..969b7dde7f
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseSingleSelector.ts
@@ -0,0 +1,122 @@
+import { EditableValue, ObjectItem, SelectionSingleValue } from "mendix";
+import { Big } from "big.js";
+import {
+    CheckboxRadioSelectionContainerProps,
+    OptionsSourceCustomContentTypeEnum
+} from "../../../typings/CheckboxRadioSelectionProps";
+import { SingleSelector, Status } from "../types";
+import { _valuesIsEqual } from "../utils";
+import { DatabaseCaptionsProvider } from "./DatabaseCaptionsProvider";
+import { DatabaseOptionsProvider } from "./DatabaseOptionsProvider";
+import { DatabaseValuesProvider } from "./DatabaseValuesProvider";
+import { extractDatabaseProps, getReadonly } from "./utils";
+
+export class DatabaseSingleSelector<T extends string | Big, R extends EditableValue<T>> implements SingleSelector {
+    type = "single" as const;
+    attributeType: "string" | "big" | "boolean" | "date" = "string";
+    selectorType: "context" | "database" | "static" = "database";
+    status: Status = "unavailable";
+    options: DatabaseOptionsProvider;
+    caption: DatabaseCaptionsProvider;
+    clearable = false;
+    currentId: string | null = null;
+    readOnly = false;
+    customContentType: OptionsSourceCustomContentTypeEnum = "no";
+    validation?: string = undefined;
+    values: DatabaseValuesProvider;
+    protected _objectsMap: Map<string, ObjectItem> = new Map();
+    protected _attr: R | undefined;
+    private selection?: SelectionSingleValue;
+
+    constructor() {
+        this.caption = new DatabaseCaptionsProvider(this._objectsMap);
+        this.options = new DatabaseOptionsProvider(this.caption, this._objectsMap);
+        this.values = new DatabaseValuesProvider(this._objectsMap);
+    }
+
+    updateProps(props: CheckboxRadioSelectionContainerProps): void {
+        const {
+            targetAttribute,
+            captionProvider,
+            clearable,
+            customContent,
+            customContentType,
+            ds,
+            emptyOption,
+            valueSourceAttribute
+        } = extractDatabaseProps(props);
+
+        if (ds.status === "loading") {
+            return;
+        }
+
+        this._attr = targetAttribute as R;
+        this.readOnly = getReadonly(targetAttribute, props.customEditability, props.customEditabilityExpression);
+
+        this.caption.updateProps({
+            emptyOptionText: emptyOption,
+            formattingAttributeOrExpression: captionProvider,
+            customContent,
+            customContentType,
+            attribute: valueSourceAttribute,
+            caption: targetAttribute?.displayValue
+        });
+
+        this.options._updateProps({
+            ds
+        });
+
+        this.values.updateProps({
+            valueAttribute: valueSourceAttribute
+        });
+
+        if (!ds || ds.status === "unavailable" || !emptyOption || emptyOption.status !== "available") {
+            this.status = "unavailable";
+            this.currentId = null;
+            this.clearable = false;
+            return;
+        }
+
+        if (targetAttribute?.status === "available") {
+            if (targetAttribute.value && !this.currentId) {
+                const allOptions = this.options.getAll();
+                const obj = allOptions.find(option => {
+                    return _valuesIsEqual(targetAttribute.value, this.values.get(option));
+                });
+                if (obj) {
+                    this.currentId = obj;
+                }
+            } else if (!targetAttribute.value && this.currentId) {
+                this.currentId = null;
+                if (this.selection?.selection) {
+                    this.selection.setSelection(undefined);
+                }
+            }
+        }
+
+        this.status = targetAttribute?.status ?? ds.status;
+        this.validation = targetAttribute?.validation;
+        this.selection = props.optionsSourceDatabaseItemSelection as SelectionSingleValue;
+
+        this.clearable = clearable;
+        this.customContentType = customContentType;
+
+        if (this.selection && this.selection.selection === undefined) {
+            const objectId = this.options.getAll().find(option => {
+                return targetAttribute && _valuesIsEqual(targetAttribute?.value, this.values.get(option));
+            });
+            if (objectId) {
+                this.selection.setSelection(this.options._optionToValue(objectId));
+            }
+        }
+    }
+
+    setValue(objectId: string | null): void {
+        const value = this.values.get(objectId) as T;
+        this._attr?.setValue(value);
+        if (objectId !== (this.selection?.selection?.id ?? "")) {
+            this.selection?.setSelection(this.options._optionToValue(objectId));
+        }
+        this.currentId = objectId;
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseValuesProvider.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseValuesProvider.ts
new file mode 100644
index 0000000000..a506bb019e
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseValuesProvider.ts
@@ -0,0 +1,38 @@
+import { ListAttributeValue, ObjectItem } from "mendix";
+import { Big } from "big.js";
+import { ValuesProvider } from "../types";
+
+interface DatabaseValuesProviderProps {
+    valueAttribute?: ListAttributeValue<string | Big>;
+}
+
+export class DatabaseValuesProvider implements ValuesProvider<string | Big> {
+    private _objectsMap: Map<string, ObjectItem>;
+    private valueAttribute?: ListAttributeValue<string | Big>;
+
+    constructor(objectsMap: Map<string, ObjectItem>) {
+        this._objectsMap = objectsMap;
+    }
+
+    updateProps(props: DatabaseValuesProviderProps): void {
+        this.valueAttribute = props.valueAttribute;
+    }
+
+    get(key: string | null): string | Big | undefined {
+        if (!key) {
+            return undefined;
+        }
+
+        const item = this._objectsMap.get(key);
+        if (!item) {
+            return undefined;
+        }
+
+        if (this.valueAttribute) {
+            return this.valueAttribute.get(item).value;
+        }
+
+        // Default to using the object ID if no value attribute is specified
+        return item.id;
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/Preview/DatabasePreviewSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/Preview/DatabasePreviewSelector.ts
new file mode 100644
index 0000000000..fe9fbb8502
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/Preview/DatabasePreviewSelector.ts
@@ -0,0 +1,73 @@
+import { SingleSelector, Status, CaptionsProvider, OptionsProvider, MultiSelector } from "../../types";
+import {
+    CheckboxRadioSelectionPreviewProps,
+    OptionsSourceCustomContentTypeEnum
+} from "../../../../typings/CheckboxRadioSelectionProps";
+import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
+import { PreviewCaptionsProvider } from "../../Preview/PreviewCaptionsProvider";
+import { PreviewOptionsProvider } from "../../Preview/PreviewOptionsProvider";
+import { getCustomCaption } from "../../utils";
+
+export class DatabasePreviewSelector implements SingleSelector {
+    type = "single" as const;
+    status: Status = "available";
+    attributeType?: "string" | "boolean" | "big" | "date" | undefined;
+    selectorType?: "context" | "database" | "static" | undefined;
+    // type: "single";
+    readOnly: boolean;
+    validation?: string | undefined;
+    clearable: boolean = false;
+    currentId: string | null;
+    customContentType: OptionsSourceCustomContentTypeEnum;
+    caption: CaptionsProvider;
+    options: OptionsProvider;
+
+    constructor(props: CheckboxRadioSelectionPreviewProps) {
+        this.currentId = `single-${generateUUID()}`;
+        this.customContentType = props.optionsSourceCustomContentType;
+        this.readOnly = props.readOnly;
+        this.caption = new PreviewCaptionsProvider(new Map(), getCustomCaption(props));
+        this.options = new PreviewOptionsProvider(this.caption, new Map());
+        (this.caption as PreviewCaptionsProvider).updatePreviewProps({
+            customContentRenderer: props.optionsSourceDatabaseCustomContent?.renderer,
+            customContentType: props.optionsSourceCustomContentType
+        });
+        // Show dropzones in design mode when custom content is enabled
+    }
+
+    updateProps(): void {}
+    setValue(): void {}
+}
+
+export class DatabaseMultiPreviewSelector implements MultiSelector {
+    type = "multi" as const;
+    status: Status = "available";
+    attributeType?: "string" | "boolean" | "big" | "date" | undefined;
+    selectorType?: "context" | "database" | "static" | undefined;
+    readOnly: boolean;
+    validation?: string | undefined;
+    clearable: boolean = false;
+    currentId: string[] | null;
+    customContentType: OptionsSourceCustomContentTypeEnum;
+    caption: CaptionsProvider;
+    options: OptionsProvider;
+
+    constructor(props: CheckboxRadioSelectionPreviewProps) {
+        this.currentId = [getCustomCaption(props)];
+        this.customContentType = props.optionsSourceCustomContentType;
+        this.readOnly = props.readOnly;
+        this.caption = new PreviewCaptionsProvider(new Map(), getCustomCaption(props));
+        this.options = new PreviewOptionsProvider(this.caption, new Map());
+        (this.caption as PreviewCaptionsProvider).updatePreviewProps({
+            customContentRenderer: props.optionsSourceDatabaseCustomContent?.renderer,
+            customContentType: props.optionsSourceCustomContentType
+        });
+        // Show dropzones in design mode when custom content is enabled
+    }
+    getOptions(): string[] {
+        return this.currentId || [];
+    }
+
+    updateProps(): void {}
+    setValue(): void {}
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/utils.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/utils.ts
new file mode 100644
index 0000000000..509f009219
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/utils.ts
@@ -0,0 +1,73 @@
+import {
+    DynamicValue,
+    EditableValue,
+    ListAttributeValue,
+    ListExpressionValue,
+    ListValue,
+    ListWidgetValue,
+    ValueStatus
+} from "mendix";
+import { Big } from "big.js";
+import {
+    CheckboxRadioSelectionContainerProps,
+    CustomEditabilityEnum,
+    OptionsSourceCustomContentTypeEnum
+} from "../../../typings/CheckboxRadioSelectionProps";
+
+export function extractDatabaseProps(props: CheckboxRadioSelectionContainerProps): {
+    targetAttribute: EditableValue<string | Big> | undefined;
+    captionProvider: ListAttributeValue<string> | ListExpressionValue<string>;
+    clearable: boolean;
+    customContent: ListWidgetValue | undefined;
+    customContentType: OptionsSourceCustomContentTypeEnum;
+    ds: ListValue;
+    emptyOption: DynamicValue<string>;
+    valueSourceAttribute: ListAttributeValue<string | Big> | undefined;
+} {
+    const targetAttribute = props.databaseAttributeString;
+    const ds = props.optionsSourceDatabaseDataSource!;
+
+    // Determine caption provider based on caption type
+    const captionProvider =
+        props.optionsSourceDatabaseCaptionType === "attribute"
+            ? props.optionsSourceDatabaseCaptionAttribute!
+            : props.optionsSourceDatabaseCaptionExpression!;
+
+    // For simplicity, we'll create a basic empty option
+    const emptyOption: DynamicValue<string> = {
+        status: ValueStatus.Available,
+        value: ""
+    };
+
+    // Checkbox Radio Selection controls don't need clearable like combobox does
+    const clearable = false;
+
+    const customContent = props.optionsSourceDatabaseCustomContent;
+    const customContentType = props.optionsSourceCustomContentType;
+    const valueSourceAttribute = props.optionsSourceDatabaseValueAttribute;
+
+    return {
+        targetAttribute,
+        captionProvider,
+        clearable,
+        customContent,
+        customContentType,
+        ds,
+        emptyOption,
+        valueSourceAttribute
+    };
+}
+
+export function getReadonly(
+    attribute: EditableValue<string | Big> | undefined,
+    customEditability: CustomEditabilityEnum,
+    customEditabilityExpression: DynamicValue<boolean>
+): boolean {
+    if (customEditability === "never") {
+        return true;
+    }
+    if (customEditability === "conditionally" && customEditabilityExpression.value === false) {
+        return true;
+    }
+    return attribute?.readOnly ?? false;
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/EnumBool/EnumAndBooleanSimpleCaptionsProvider.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/EnumBool/EnumAndBooleanSimpleCaptionsProvider.tsx
new file mode 100644
index 0000000000..7519acdb21
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/EnumBool/EnumAndBooleanSimpleCaptionsProvider.tsx
@@ -0,0 +1,35 @@
+import { DynamicValue, EditableValue } from "mendix";
+import { ReactNode } from "react";
+import { CaptionsProvider } from "../types";
+
+interface EnumAndBooleanSimpleCaptionsProviderProps {
+    emptyOptionText?: DynamicValue<string>;
+    attribute: EditableValue<string | boolean>;
+}
+
+export class EnumAndBooleanSimpleCaptionsProvider implements CaptionsProvider {
+    private attr?: EditableValue<string | boolean>;
+    emptyCaption = "";
+    formatter?: undefined;
+
+    updateProps(props: EnumAndBooleanSimpleCaptionsProviderProps): void {
+        this.attr = props.attribute;
+        if (!props.emptyOptionText || props.emptyOptionText.status === "unavailable") {
+            this.emptyCaption = "";
+        } else {
+            this.emptyCaption = props.emptyOptionText.value!;
+        }
+    }
+
+    get(value: string | boolean | null): string {
+        if (value === null) {
+            return this.emptyCaption;
+        }
+
+        return this.attr?.formatter.format(value) ?? "";
+    }
+
+    render(value: string | null): ReactNode {
+        return this.get(value);
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/EnumBool/EnumBoolOptionsProvider.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/EnumBool/EnumBoolOptionsProvider.ts
new file mode 100644
index 0000000000..aee367bfef
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/EnumBool/EnumBoolOptionsProvider.ts
@@ -0,0 +1,29 @@
+import { EditableValue } from "mendix";
+import { BaseOptionsProvider } from "../BaseOptionsProvider";
+
+export class EnumBoolOptionsProvider<T extends boolean | string> extends BaseOptionsProvider<
+    T,
+    { attribute: EditableValue<string | boolean> }
+> {
+    private isBoolean = false;
+
+    _updateProps(props: { attribute: EditableValue<string | boolean>; filterType: "none" }): void {
+        if (props.attribute.status === "unavailable") {
+            this.options = [];
+        }
+        this.options = (props.attribute.universe ?? []).map(o => o.toString());
+        this.isBoolean = typeof props.attribute.universe?.[0] === "boolean";
+    }
+
+    _optionToValue(value: string | null): T | undefined {
+        if (this.isBoolean) {
+            return (value === "true") as T;
+        } else {
+            return (value ?? undefined) as T;
+        }
+    }
+
+    _valueToOption(value: string | boolean | undefined): string | null {
+        return value?.toString() ?? null;
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/EnumBool/EnumBooleanSingleSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/EnumBool/EnumBooleanSingleSelector.ts
new file mode 100644
index 0000000000..26de1946a0
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/EnumBool/EnumBooleanSingleSelector.ts
@@ -0,0 +1,67 @@
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
+import { ActionValue, EditableValue } from "mendix";
+import {
+    CheckboxRadioSelectionContainerProps,
+    OptionsSourceCustomContentTypeEnum
+} from "../../../typings/CheckboxRadioSelectionProps";
+import { SingleSelector, Status } from "../types";
+import { EnumAndBooleanSimpleCaptionsProvider } from "./EnumAndBooleanSimpleCaptionsProvider";
+import { EnumBoolOptionsProvider } from "./EnumBoolOptionsProvider";
+import { extractEnumerationProps } from "./utils";
+
+export class EnumBooleanSingleSelector implements SingleSelector {
+    status: Status = "unavailable";
+    type = "single" as const;
+    validation?: string = undefined;
+    private isBoolean = false;
+    private _attr: EditableValue<string | boolean> | undefined;
+    private onChangeEvent?: ActionValue;
+
+    currentId: string | null = null;
+    caption: EnumAndBooleanSimpleCaptionsProvider;
+    options: EnumBoolOptionsProvider<string | boolean>;
+    customContentType: OptionsSourceCustomContentTypeEnum = "no";
+    clearable = true;
+    readOnly = false;
+
+    constructor() {
+        this.caption = new EnumAndBooleanSimpleCaptionsProvider();
+        this.options = new EnumBoolOptionsProvider(this.caption);
+    }
+
+    updateProps(props: CheckboxRadioSelectionContainerProps): void {
+        const [attr, emptyOption, clearable, filterType] = extractEnumerationProps(props);
+        this._attr = attr;
+
+        this.caption.updateProps({
+            attribute: attr,
+            emptyOptionText: emptyOption
+        });
+
+        this.options._updateProps({
+            attribute: attr,
+            filterType
+        });
+
+        if (!attr || attr.status === "unavailable" || !emptyOption || emptyOption.status === "unavailable") {
+            this.status = "unavailable";
+            this.currentId = null;
+            this.clearable = true;
+
+            return;
+        }
+
+        this.onChangeEvent = props.onChangeEvent;
+        this.status = attr.status;
+        this.isBoolean = typeof attr.universe?.[0] === "boolean";
+        this.clearable = this.isBoolean ? false : clearable;
+        this.currentId = attr.value?.toString() ?? null;
+        this.readOnly = attr.readOnly;
+        this.validation = attr.validation;
+    }
+
+    setValue(value: string | null): void {
+        this._attr?.setValue(this.options._optionToValue(value));
+        executeAction(this.onChangeEvent);
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/EnumBool/utils.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/EnumBool/utils.ts
new file mode 100644
index 0000000000..8bc0d6e73f
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/EnumBool/utils.ts
@@ -0,0 +1,22 @@
+import { DynamicValue, EditableValue, ValueStatus } from "mendix";
+import { CheckboxRadioSelectionContainerProps } from "../../../typings/CheckboxRadioSelectionProps";
+
+export function extractEnumerationProps(
+    props: CheckboxRadioSelectionContainerProps
+): [EditableValue<string | boolean>, DynamicValue<string>, boolean, "none"] {
+    const attribute = props.optionsSourceType === "enumeration" ? props.attributeEnumeration : props.attributeBoolean;
+
+    // For simplicity, we'll create a basic empty option
+    const emptyOption: DynamicValue<string> = {
+        status: ValueStatus.Available,
+        value: ""
+    };
+
+    // Checkbox Radio Selection controls don't need clearable like combobox does
+    const clearable = false;
+
+    // No filtering needed for radio buttons/checkboxes
+    const filterType = "none" as const;
+
+    return [attribute, emptyOption, clearable, filterType];
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Preview/PreviewCaptionsProvider.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Preview/PreviewCaptionsProvider.tsx
new file mode 100644
index 0000000000..276f2ea586
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Preview/PreviewCaptionsProvider.tsx
@@ -0,0 +1,42 @@
+import { OptionsSourceCustomContentTypeEnum } from "../../../typings/CheckboxRadioSelectionProps";
+import { SimpleCaptionsProvider } from "./SimpleCaptionsProvider";
+import { createElement, ReactNode, ComponentType } from "react";
+interface PreviewProps {
+    customContentRenderer:
+        | ComponentType<{ children: ReactNode; caption?: string }>
+        | Array<ComponentType<{ children: ReactNode; caption?: string }>>;
+    customContentType: OptionsSourceCustomContentTypeEnum;
+}
+
+export class PreviewCaptionsProvider extends SimpleCaptionsProvider {
+    emptyCaption = "Checkbox Radio Selection";
+    private customContentRenderer: ComponentType<{ children: ReactNode; caption?: string }> = () => <div>Dropzone</div>;
+    get(value: string | null): string {
+        return value || this.emptyCaption;
+    }
+
+    getCustomContent(value: string | null): ReactNode | null {
+        if (value === null) {
+            return null;
+        }
+        if (this.customContentType !== "no") {
+            return (
+                <this.customContentRenderer caption={"CUSTOM CONTENT"}>
+                    <div />
+                </this.customContentRenderer>
+            );
+        }
+    }
+
+    updatePreviewProps(props: PreviewProps): void {
+        this.customContentRenderer = props.customContentRenderer as ComponentType<{
+            children: ReactNode;
+            caption?: string | undefined;
+        }>;
+        this.customContentType = props.customContentType;
+    }
+
+    render(value: string | null): ReactNode {
+        return super.render(value);
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Preview/PreviewOptionsProvider.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Preview/PreviewOptionsProvider.ts
new file mode 100644
index 0000000000..0f696a0fa7
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Preview/PreviewOptionsProvider.ts
@@ -0,0 +1,32 @@
+import { ObjectItem } from "mendix";
+import { BaseOptionsProvider } from "../BaseOptionsProvider";
+import { CaptionsProvider, OptionsProvider, Status } from "../types";
+
+export class PreviewOptionsProvider implements OptionsProvider<ObjectItem, BaseOptionsProvider> {
+    hasMore?: boolean | undefined = undefined;
+    searchTerm: string = "";
+    status: Status = "available";
+    isLoading: boolean = false;
+
+    constructor(
+        protected caption: CaptionsProvider,
+        protected valuesMap: Map<string, ObjectItem>
+    ) {}
+    onAfterSearchTermChange(_callback: () => void): void {}
+    setSearchTerm(_value: string): void {}
+    loadMore?(): void {
+        throw new Error("Method not implemented.");
+    }
+    _updateProps(_: BaseOptionsProvider): void {
+        throw new Error("Method not implemented.");
+    }
+    _optionToValue(_value: string | null): ObjectItem | undefined {
+        throw new Error("Method not implemented.");
+    }
+    _valueToOption(_value: ObjectItem | undefined): string | null {
+        throw new Error("Method not implemented.");
+    }
+    getAll(): string[] {
+        return ["..."];
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Preview/SimpleCaptionsProvider.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Preview/SimpleCaptionsProvider.tsx
new file mode 100644
index 0000000000..a8652bb8c3
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Preview/SimpleCaptionsProvider.tsx
@@ -0,0 +1,76 @@
+import { DynamicValue, ListAttributeValue, ListExpressionValue, ListWidgetValue, ObjectItem } from "mendix";
+import { ReactNode, createElement } from "react";
+import { OptionsSourceCustomContentTypeEnum } from "../../../typings/CheckboxRadioSelectionProps";
+import { CaptionsProvider } from "../types";
+
+interface Props {
+    emptyOptionText?: DynamicValue<string>;
+    formattingAttributeOrExpression: ListExpressionValue<string> | ListAttributeValue<string>;
+    customContent?: ListWidgetValue | undefined;
+    customContentType: OptionsSourceCustomContentTypeEnum;
+}
+
+export class SimpleCaptionsProvider implements CaptionsProvider {
+    private unavailableCaption = "<...>";
+    formatter?: ListExpressionValue<string> | ListAttributeValue<string>;
+    protected customContent?: ListWidgetValue;
+    protected customContentType: OptionsSourceCustomContentTypeEnum = "no";
+    emptyCaption = "";
+
+    constructor(
+        private optionsMap: Map<string, ObjectItem>,
+        private dataSourcePlaceholder: string
+    ) {}
+
+    updateProps(props: Props): void {
+        if (!props.emptyOptionText || props.emptyOptionText.status === "unavailable") {
+            this.emptyCaption = "";
+        } else {
+            this.emptyCaption = props.emptyOptionText.value!;
+        }
+
+        this.formatter = props.formattingAttributeOrExpression;
+        this.customContent = props.customContent;
+        this.customContentType = props.customContentType;
+    }
+
+    get(value: string | null): string {
+        if (value === null) {
+            return this.emptyCaption;
+        }
+        if (!this.formatter) {
+            throw new Error("SimpleCaptionsProvider: no formatter available.");
+        }
+        const item = this.optionsMap.get(value);
+        if (!item) {
+            return this.unavailableCaption;
+        }
+
+        const captionValue = this.formatter.get(item);
+        if (!captionValue || captionValue.status === "unavailable") {
+            return this.unavailableCaption;
+        }
+
+        return captionValue.value ?? "";
+    }
+
+    getCustomContent(value: string | null): ReactNode | null {
+        if (value === null) {
+            return null;
+        }
+        const item = this.optionsMap.get(value);
+        if (!item) {
+            return null;
+        }
+
+        return this.customContent?.get(item);
+    }
+
+    render(value: string | null): ReactNode {
+        if (this.customContentType === "yes") {
+            return this.getCustomContent(value);
+        }
+        return <div>{this.dataSourcePlaceholder}</div>;
+        // return this.get(value);
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/Preview/StaticPreviewSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/Preview/StaticPreviewSelector.ts
new file mode 100644
index 0000000000..0033c1f8c0
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/Preview/StaticPreviewSelector.ts
@@ -0,0 +1,35 @@
+import { SingleSelector, Status, CaptionsProvider, OptionsProvider } from "../../types";
+import {
+    CheckboxRadioSelectionPreviewProps,
+    OptionsSourceCustomContentTypeEnum
+} from "../../../../typings/CheckboxRadioSelectionProps";
+import { PreviewCaptionsProvider } from "../../Preview/PreviewCaptionsProvider";
+import { PreviewOptionsProvider } from "../../Preview/PreviewOptionsProvider";
+import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
+import { getCustomCaption } from "../../utils";
+
+export class StaticPreviewSelector implements SingleSelector {
+    type = "single" as const;
+    status: Status = "available";
+    attributeType?: "string" | "boolean" | "big" | "date" | undefined;
+    selectorType?: "context" | "database" | "static" | undefined;
+    // type: "single";
+    readOnly: boolean;
+    validation?: string | undefined;
+    clearable: boolean = false;
+    currentId: string | null;
+    customContentType: OptionsSourceCustomContentTypeEnum;
+    caption: CaptionsProvider;
+    options: OptionsProvider;
+
+    constructor(props: CheckboxRadioSelectionPreviewProps) {
+        this.currentId = `single-${generateUUID()}`;
+        this.customContentType = props.optionsSourceCustomContentType;
+        this.readOnly = props.readOnly;
+        this.caption = new PreviewCaptionsProvider(new Map(), getCustomCaption(props));
+        this.options = new PreviewOptionsProvider(this.caption, new Map());
+    }
+
+    updateProps(): void {}
+    setValue(): void {}
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/StaticCaptionsProvider.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/StaticCaptionsProvider.tsx
new file mode 100644
index 0000000000..4961bb9f4d
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/StaticCaptionsProvider.tsx
@@ -0,0 +1,65 @@
+import { DynamicValue } from "mendix";
+import { ReactNode } from "react";
+import {
+    OptionsSourceCustomContentTypeEnum,
+    OptionsSourceStaticDataSourceType
+} from "../../../typings/CheckboxRadioSelectionProps";
+import { CaptionsProvider } from "../types";
+
+interface StaticCaptionsProviderProps {
+    emptyOptionText?: DynamicValue<string>;
+    customContentType: OptionsSourceCustomContentTypeEnum;
+    caption?: string;
+}
+
+export class StaticCaptionsProvider implements CaptionsProvider {
+    emptyCaption = "";
+    formatter?: undefined;
+    private _objectsMap: Map<string, OptionsSourceStaticDataSourceType>;
+    private customContentType: OptionsSourceCustomContentTypeEnum = "no";
+
+    constructor(objectsMap: Map<string, OptionsSourceStaticDataSourceType>) {
+        this._objectsMap = objectsMap;
+    }
+
+    updateProps(props: StaticCaptionsProviderProps): void {
+        if (!props.emptyOptionText || props.emptyOptionText.status === "unavailable") {
+            this.emptyCaption = "";
+        } else {
+            this.emptyCaption = props.emptyOptionText.value!;
+        }
+        this.customContentType = props.customContentType;
+    }
+
+    get(value: string | null): string {
+        if (value === null) {
+            return this.emptyCaption;
+        }
+
+        const item = this._objectsMap.get(value);
+        if (!item) {
+            return "";
+        }
+
+        return item.staticDataSourceCaption.value || "";
+    }
+
+    getCustomContent(value: string | null): ReactNode | null {
+        if (value === null) {
+            return null;
+        }
+        const item = this._objectsMap.get(value);
+        if (!item) {
+            return null;
+        }
+
+        return item.staticDataSourceCustomContent;
+    }
+
+    render(value: string | null): ReactNode {
+        if (this.customContentType === "yes") {
+            return this.getCustomContent(value);
+        }
+        return this.get(value);
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/StaticOptionsProvider.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/StaticOptionsProvider.ts
new file mode 100644
index 0000000000..5aac408e10
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/StaticOptionsProvider.ts
@@ -0,0 +1,41 @@
+import { OptionsSourceStaticDataSourceType } from "../../../typings/CheckboxRadioSelectionProps";
+import { BaseOptionsProvider } from "../BaseOptionsProvider";
+import { CaptionsProvider } from "../types";
+
+export class StaticOptionsProvider extends BaseOptionsProvider<
+    OptionsSourceStaticDataSourceType | undefined,
+    { ds: OptionsSourceStaticDataSourceType[] }
+> {
+    constructor(
+        caption: CaptionsProvider,
+        private _objectsMap: Map<string, OptionsSourceStaticDataSourceType>
+    ) {
+        super(caption);
+    }
+
+    _updateProps(props: { ds: OptionsSourceStaticDataSourceType[] }): void {
+        this._objectsMap.clear();
+        this.options = [];
+
+        props.ds.forEach((item, index) => {
+            const key = index.toString();
+            this._objectsMap.set(key, item);
+            this.options.push(key);
+        });
+    }
+
+    _optionToValue(option: string | null): OptionsSourceStaticDataSourceType | undefined {
+        return this._objectsMap.get(option || "");
+    }
+
+    _valueToOption(value: OptionsSourceStaticDataSourceType | undefined): string | null {
+        if (!value) return null;
+
+        for (const [key, item] of this._objectsMap.entries()) {
+            if (item === value) {
+                return key;
+            }
+        }
+        return null;
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/StaticSingleSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/StaticSingleSelector.ts
new file mode 100644
index 0000000000..a4ee92a4da
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/StaticSingleSelector.ts
@@ -0,0 +1,89 @@
+import { ActionValue, EditableValue } from "mendix";
+import { Big } from "big.js";
+import {
+    CheckboxRadioSelectionContainerProps,
+    OptionsSourceCustomContentTypeEnum,
+    OptionsSourceStaticDataSourceType
+} from "../../../typings/CheckboxRadioSelectionProps";
+import { SingleSelector, Status } from "../types";
+import { StaticOptionsProvider } from "./StaticOptionsProvider";
+import { StaticCaptionsProvider } from "./StaticCaptionsProvider";
+import { extractStaticProps } from "./utils";
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
+import { _valuesIsEqual } from "../utils";
+
+export class StaticSingleSelector implements SingleSelector {
+    type = "single" as const;
+    attributeType: "string" | "big" | "boolean" | "date" = "string";
+    selectorType: "context" | "database" | "static" = "static";
+    status: Status = "unavailable";
+    options: StaticOptionsProvider;
+    caption: StaticCaptionsProvider;
+    clearable = false;
+    currentId: string | null = null;
+    readOnly = false;
+    customContentType: OptionsSourceCustomContentTypeEnum = "no";
+    validation?: string = undefined;
+    protected _attr: EditableValue<string | Big | boolean | Date> | undefined;
+    private onChangeEvent?: ActionValue;
+    private _objectsMap: Map<string, OptionsSourceStaticDataSourceType> = new Map();
+
+    constructor() {
+        this.caption = new StaticCaptionsProvider(this._objectsMap);
+        this.options = new StaticOptionsProvider(this.caption, this._objectsMap);
+    }
+
+    updateProps(props: CheckboxRadioSelectionContainerProps): void {
+        const [attr, ds, emptyOption, clearable, onChangeEvent, customContentType] = extractStaticProps(props);
+        this._attr = attr;
+        this.caption.updateProps({
+            emptyOptionText: emptyOption,
+            customContentType,
+            caption: this._attr.displayValue
+        });
+
+        this.options._updateProps({
+            ds
+        });
+
+        if (
+            !attr ||
+            attr.status === "unavailable" ||
+            !ds ||
+            ds[0].staticDataSourceValue.status === "unavailable" ||
+            ds[0].staticDataSourceCaption.status === "unavailable" ||
+            !emptyOption ||
+            emptyOption.status === "unavailable"
+        ) {
+            this.status = "unavailable";
+            this.currentId = null;
+            this.clearable = false;
+            return;
+        }
+        if (ds.length > 0 && ds[0].staticDataSourceValue.status === "available" && attr.value !== "") {
+            const index = ds.findIndex(option => _valuesIsEqual(option.staticDataSourceValue.value, attr.value));
+            if (index !== -1) {
+                this.currentId = index.toString();
+            }
+        }
+        this.clearable = clearable;
+        this.status = attr.status;
+        this.readOnly = attr.readOnly;
+        this.onChangeEvent = onChangeEvent;
+        this.customContentType = customContentType;
+        this.validation = attr.validation;
+        this.attributeType =
+            typeof attr.universe?.[0] === "boolean"
+                ? "boolean"
+                : attr.formatter?.type === "datetime"
+                  ? "date"
+                  : "string";
+    }
+
+    setValue(key: string | null): void {
+        const value = this._objectsMap.get(key || "");
+        this._attr?.setValue(value?.staticDataSourceValue.value);
+        this.currentId = key;
+        executeAction(this.onChangeEvent);
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/utils.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/utils.ts
new file mode 100644
index 0000000000..a2eaa09fef
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/utils.ts
@@ -0,0 +1,35 @@
+import { ActionValue, DynamicValue, EditableValue, ValueStatus } from "mendix";
+import { Big } from "big.js";
+import {
+    CheckboxRadioSelectionContainerProps,
+    OptionsSourceCustomContentTypeEnum,
+    OptionsSourceStaticDataSourceType
+} from "../../../typings/CheckboxRadioSelectionProps";
+
+export function extractStaticProps(
+    props: CheckboxRadioSelectionContainerProps
+): [
+    EditableValue<string | Big | boolean | Date>,
+    OptionsSourceStaticDataSourceType[],
+    DynamicValue<string>,
+    boolean,
+    ActionValue | undefined,
+    OptionsSourceCustomContentTypeEnum
+] {
+    const attribute = props.staticAttribute;
+    const ds = props.optionsSourceStaticDataSource;
+
+    // For simplicity, we'll create a basic empty option
+    const emptyOption: DynamicValue<string> = {
+        status: ValueStatus.Available,
+        value: ""
+    };
+
+    // Checkbox Radio Selection controls don't need clearable like combobox does
+    const clearable = false;
+
+    const onChangeEvent = props.onChangeEvent;
+    const customContentType = props.optionsSourceCustomContentType;
+
+    return [attribute, ds, emptyOption, clearable, onChangeEvent, customContentType];
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/getSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/getSelector.ts
new file mode 100644
index 0000000000..090f08de97
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/getSelector.ts
@@ -0,0 +1,32 @@
+import { CheckboxRadioSelectionContainerProps } from "../../typings/CheckboxRadioSelectionProps";
+import { EnumBooleanSingleSelector } from "./EnumBool/EnumBooleanSingleSelector";
+import { StaticSingleSelector } from "./Static/StaticSingleSelector";
+import { AssociationSingleSelector } from "./Association/AssociationSingleSelector";
+import { AssociationMultiSelector } from "./Association/AssociationMultiSelector";
+import { DatabaseSingleSelector } from "./Database/DatabaseSingleSelector";
+import { DatabaseMultiSelector } from "./Database/DatabaseMultiSelector";
+import { Selector } from "./types";
+
+export function getSelector(props: CheckboxRadioSelectionContainerProps): Selector {
+    if (props.source === "context") {
+        if (["enumeration", "boolean"].includes(props.optionsSourceType)) {
+            return new EnumBooleanSingleSelector();
+        } else if (props.optionsSourceType === "association") {
+            return props.attributeAssociation.type === "Reference"
+                ? new AssociationSingleSelector()
+                : new AssociationMultiSelector();
+        } else {
+            throw new Error(`'optionsSourceType' of type '${props.optionsSourceType}' is not supported`);
+        }
+    } else if (props.source === "database") {
+        if (props.optionsSourceDatabaseItemSelection?.type === "Multi") {
+            return new DatabaseMultiSelector();
+        } else {
+            return new DatabaseSingleSelector();
+        }
+    } else if (props.source === "static") {
+        return new StaticSingleSelector();
+    }
+
+    throw new Error(`Source of type '${props.source}' is not supported`);
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/types.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/types.ts
new file mode 100644
index 0000000000..02e915aff2
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/types.ts
@@ -0,0 +1,87 @@
+import { DynamicValue, ListAttributeValue, ListExpressionValue, ListValue } from "mendix";
+import { ReactNode } from "react";
+import {
+    CheckboxRadioSelectionContainerProps,
+    OptionsSourceCustomContentTypeEnum,
+    ReadOnlyStyleEnum
+} from "../../typings/CheckboxRadioSelectionProps";
+
+export type Status = "unavailable" | "loading" | "available";
+export type SelectionType = "single" | "multi";
+export type Selector = SingleSelector | MultiSelector;
+export type SortOrder = "asc" | "desc";
+
+export interface CaptionsProvider {
+    get(value: string | null): string;
+    render(value: (string | null) | (number | null)): ReactNode;
+    emptyCaption: string;
+    formatter?: ListExpressionValue<string> | ListAttributeValue<string>;
+}
+
+export interface ValuesProvider<T> {
+    get(key: string | null): T | undefined;
+}
+
+export interface OptionsProvider<T = unknown, P = object> {
+    status: Status;
+    searchTerm: string;
+    sortOrder?: SortOrder;
+
+    getAll(): string[];
+    datasourceFilter?: ListValue["filter"] | undefined;
+
+    // search related
+    setSearchTerm(term: string): void;
+    onAfterSearchTermChange(callback: () => void): void;
+
+    // lazy loading related
+    hasMore?: boolean;
+    loadMore?(): void;
+    isLoading: boolean;
+
+    // for private use
+    _updateProps(props: P): void;
+    _optionToValue(option: string | null): T | undefined;
+    _valueToOption(value: T | undefined): string | null;
+}
+
+interface SelectorBase<T, V> {
+    updateProps(props: CheckboxRadioSelectionContainerProps): void;
+    status: Status;
+    attributeType?: "string" | "big" | "boolean" | "date";
+    selectorType?: "context" | "database" | "static";
+    type: T;
+    readOnly: boolean;
+    validation?: string;
+
+    // options related
+    options: OptionsProvider;
+
+    // caption related
+    caption: CaptionsProvider;
+
+    // value related
+    clearable: boolean;
+
+    currentId: V | null;
+    setValue(value: V | null): void;
+
+    customContentType: OptionsSourceCustomContentTypeEnum;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface SingleSelector extends SelectorBase<"single", string> {}
+
+export interface MultiSelector extends SelectorBase<"multi", string[]> {
+    getOptions(): string[];
+}
+
+export interface SelectionBaseProps<Selector> {
+    inputId: string;
+    labelId?: string;
+    readOnlyStyle: ReadOnlyStyleEnum;
+    selector: Selector;
+    tabIndex: number;
+    ariaRequired: DynamicValue<boolean>;
+    groupName: DynamicValue<string> | undefined;
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/utils.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/utils.ts
new file mode 100644
index 0000000000..5d762b020f
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/utils.ts
@@ -0,0 +1,56 @@
+import { Big } from "big.js";
+import { CheckboxRadioSelectionPreviewProps } from "../../typings/CheckboxRadioSelectionProps";
+
+export function _valuesIsEqual(
+    value1: string | Big | boolean | Date | undefined,
+    value2: string | Big | boolean | Date | undefined
+): boolean {
+    if (value1 === value2) {
+        return true;
+    }
+
+    if (value1 instanceof Big && value2 instanceof Big) {
+        return value1.eq(value2);
+    }
+
+    if (value1 instanceof Date && value2 instanceof Date) {
+        return value1.getTime() === value2.getTime();
+    }
+
+    return false;
+}
+
+export function getCustomCaption(values: CheckboxRadioSelectionPreviewProps): string {
+    const {
+        optionsSourceType,
+        optionsSourceAssociationDataSource,
+        attributeEnumeration,
+        attributeBoolean,
+        databaseAttributeString,
+        source,
+        optionsSourceDatabaseDataSource,
+        staticAttribute,
+        optionsSourceStaticDataSource
+    } = values;
+    const emptyStringFormat = "Checkbox Radio Selection";
+    if (source === "context") {
+        switch (optionsSourceType) {
+            case "association":
+                return (optionsSourceAssociationDataSource as { caption?: string })?.caption || emptyStringFormat;
+            case "enumeration":
+                return `[${optionsSourceType}, ${attributeEnumeration}]`;
+            case "boolean":
+                return `[${optionsSourceType}, ${attributeBoolean}]`;
+            default:
+                return emptyStringFormat;
+        }
+    } else if (source === "database" && optionsSourceDatabaseDataSource) {
+        return (
+            (optionsSourceDatabaseDataSource as { caption?: string })?.caption ||
+            `${source}, ${databaseAttributeString}`
+        );
+    } else if (source === "static") {
+        return (optionsSourceStaticDataSource as { caption?: string })?.caption || `[${source}, ${staticAttribute}]`;
+    }
+    return emptyStringFormat;
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/hooks/useGetSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/hooks/useGetSelector.ts
new file mode 100644
index 0000000000..63fa4bdc51
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/hooks/useGetSelector.ts
@@ -0,0 +1,15 @@
+import { useRef, useState } from "react";
+import { CheckboxRadioSelectionContainerProps } from "../../typings/CheckboxRadioSelectionProps";
+import { getSelector } from "../helpers/getSelector";
+import { Selector } from "../helpers/types";
+
+export function useGetSelector(props: CheckboxRadioSelectionContainerProps): Selector {
+    const selectorRef = useRef<Selector | undefined>(undefined);
+    const [, setInput] = useState({});
+    if (!selectorRef.current) {
+        selectorRef.current = getSelector(props);
+        selectorRef.current.options.onAfterSearchTermChange(() => setInput({}));
+    }
+    selectorRef.current.updateProps(props);
+    return selectorRef.current;
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/package.xml b/packages/pluggableWidgets/checkbox-radio-selection-web/src/package.xml
new file mode 100644
index 0000000000..a326e380df
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/package.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<package xmlns="http://www.mendix.com/package/1.0/">
+    <clientModule name="CheckboxRadioSelection" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+        <widgetFiles>
+            <widgetFile path="CheckboxRadioSelection.xml" />
+        </widgetFiles>
+        <files>
+            <file path="com/mendix/widget/web/checkboxradioselection" />
+        </files>
+    </clientModule>
+</package>
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/ui/CheckboxRadioSelection.scss b/packages/pluggableWidgets/checkbox-radio-selection-web/src/ui/CheckboxRadioSelection.scss
new file mode 100644
index 0000000000..aa9e23f1f7
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/ui/CheckboxRadioSelection.scss
@@ -0,0 +1,33 @@
+// Checkbox Radio Selection Widget Styles
+.widget-checkbox-radio-selection {
+    display: block;
+    position: relative;
+
+    &-readonly {
+        &.widget-checkbox-radio-selection-readonly-text {
+            .widget-checkbox-radio-selection-radio-item {
+                display: none;
+
+                &.widget-checkbox-radio-selection-radio-item-selected {
+                    display: block;
+
+                    input {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+
+    label {
+        font-weight: inherit;
+    }
+
+    input[type="radio"],
+    input[type="checkbox"] {
+        & + label {
+            cursor: pointer;
+            margin-left: var(--spacing-small, 8px);
+        }
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/ui/CheckboxRadioSelectionPreview.scss b/packages/pluggableWidgets/checkbox-radio-selection-web/src/ui/CheckboxRadioSelectionPreview.scss
new file mode 100644
index 0000000000..083123580e
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/src/ui/CheckboxRadioSelectionPreview.scss
@@ -0,0 +1,16 @@
+// Checkbox Radio Selection Widget Styles
+.widget-checkbox-radio-selection.widget-checkbox-radio-selection-editor-preview {
+    .widget-checkbox-radio-selection-readonly {
+        &.widget-checkbox-radio-selection-readonly-text {
+            .widget-checkbox-radio-selection-radio-item {
+                display: block;
+
+                &.widget-checkbox-radio-selection-radio-item {
+                    input {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/tsconfig.json b/packages/pluggableWidgets/checkbox-radio-selection-web/tsconfig.json
new file mode 100644
index 0000000000..a2a5b87e60
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/tsconfig.json
@@ -0,0 +1,31 @@
+{
+    "include": ["./src", "./typings"],
+    "compilerOptions": {
+        "baseUrl": "./",
+        "noEmitOnError": true,
+        "sourceMap": true,
+        "module": "esnext",
+        "target": "es6",
+        "lib": ["esnext", "dom"],
+        "types": ["jest", "node"],
+        "moduleResolution": "node",
+        "declaration": false,
+        "noLib": false,
+        "forceConsistentCasingInFileNames": true,
+        "noFallthroughCasesInSwitch": true,
+        "strict": true,
+        "strictFunctionTypes": false,
+        "skipLibCheck": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "jsx": "react",
+        "jsxFactory": "createElement",
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "useUnknownInCatchVariables": false,
+        "exactOptionalPropertyTypes": false,
+        "paths": {
+            "react-hot-loader/root": ["./hot-typescript.ts"]
+        }
+    }
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/typings/CheckboxRadioSelectionProps.d.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/typings/CheckboxRadioSelectionProps.d.ts
new file mode 100644
index 0000000000..616410d95f
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/typings/CheckboxRadioSelectionProps.d.ts
@@ -0,0 +1,101 @@
+/**
+ * This file was generated from CheckboxRadioSelection.xml
+ * WARNING: All changes made to this file will be overwritten
+ * @author Mendix Widgets Framework Team
+ */
+import { ComponentType, ReactNode } from "react";
+import { ActionValue, DynamicValue, EditableValue, ListValue, ListAttributeValue, ListExpressionValue, ListWidgetValue, ReferenceValue, ReferenceSetValue, SelectionSingleValue, SelectionMultiValue } from "mendix";
+import { Big } from "big.js";
+
+export type SourceEnum = "context" | "database" | "static";
+
+export type OptionsSourceTypeEnum = "association" | "enumeration" | "boolean";
+
+export type OptionsSourceAssociationCaptionTypeEnum = "attribute" | "expression";
+
+export type OptionsSourceDatabaseCaptionTypeEnum = "attribute" | "expression";
+
+export interface OptionsSourceStaticDataSourceType {
+    staticDataSourceValue: DynamicValue<string | Big | boolean | Date>;
+    staticDataSourceCustomContent: ReactNode;
+    staticDataSourceCaption: DynamicValue<string>;
+}
+
+export type OptionsSourceCustomContentTypeEnum = "yes" | "no";
+
+export type CustomEditabilityEnum = "default" | "never" | "conditionally";
+
+export type ReadOnlyStyleEnum = "bordered" | "text";
+
+export interface OptionsSourceStaticDataSourcePreviewType {
+    staticDataSourceValue: string;
+    staticDataSourceCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
+    staticDataSourceCaption: string;
+}
+
+export interface CheckboxRadioSelectionContainerProps {
+    name: string;
+    tabIndex?: number;
+    id: string;
+    source: SourceEnum;
+    optionsSourceType: OptionsSourceTypeEnum;
+    attributeEnumeration: EditableValue<string>;
+    attributeBoolean: EditableValue<boolean>;
+    optionsSourceDatabaseDataSource?: ListValue;
+    optionsSourceDatabaseItemSelection?: SelectionSingleValue | SelectionMultiValue;
+    optionsSourceAssociationCaptionType: OptionsSourceAssociationCaptionTypeEnum;
+    optionsSourceDatabaseCaptionType: OptionsSourceDatabaseCaptionTypeEnum;
+    optionsSourceAssociationCaptionAttribute?: ListAttributeValue<string>;
+    optionsSourceDatabaseCaptionAttribute?: ListAttributeValue<string>;
+    optionsSourceAssociationCaptionExpression?: ListExpressionValue<string>;
+    optionsSourceDatabaseCaptionExpression?: ListExpressionValue<string>;
+    optionsSourceDatabaseValueAttribute?: ListAttributeValue<string | Big>;
+    databaseAttributeString?: EditableValue<string | Big>;
+    attributeAssociation: ReferenceValue | ReferenceSetValue;
+    optionsSourceAssociationDataSource?: ListValue;
+    staticAttribute: EditableValue<string | Big | boolean | Date>;
+    optionsSourceStaticDataSource: OptionsSourceStaticDataSourceType[];
+    optionsSourceCustomContentType: OptionsSourceCustomContentTypeEnum;
+    optionsSourceAssociationCustomContent?: ListWidgetValue;
+    optionsSourceDatabaseCustomContent?: ListWidgetValue;
+    customEditability: CustomEditabilityEnum;
+    customEditabilityExpression: DynamicValue<boolean>;
+    readOnlyStyle: ReadOnlyStyleEnum;
+    onChangeEvent?: ActionValue;
+    ariaRequired: DynamicValue<boolean>;
+    groupName?: DynamicValue<string>;
+}
+
+export interface CheckboxRadioSelectionPreviewProps {
+    readOnly: boolean;
+    renderMode: "design" | "xray" | "structure";
+    translate: (text: string) => string;
+    source: SourceEnum;
+    optionsSourceType: OptionsSourceTypeEnum;
+    attributeEnumeration: string;
+    attributeBoolean: string;
+    optionsSourceDatabaseDataSource: {} | { caption: string } | { type: string } | null;
+    optionsSourceDatabaseItemSelection: "Single" | "Multi" | "None";
+    optionsSourceAssociationCaptionType: OptionsSourceAssociationCaptionTypeEnum;
+    optionsSourceDatabaseCaptionType: OptionsSourceDatabaseCaptionTypeEnum;
+    optionsSourceAssociationCaptionAttribute: string;
+    optionsSourceDatabaseCaptionAttribute: string;
+    optionsSourceAssociationCaptionExpression: string;
+    optionsSourceDatabaseCaptionExpression: string;
+    optionsSourceDatabaseValueAttribute: string;
+    databaseAttributeString: string;
+    attributeAssociation: string;
+    optionsSourceAssociationDataSource: {} | { caption: string } | { type: string } | null;
+    staticAttribute: string;
+    optionsSourceStaticDataSource: OptionsSourceStaticDataSourcePreviewType[];
+    optionsSourceCustomContentType: OptionsSourceCustomContentTypeEnum;
+    optionsSourceAssociationCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
+    optionsSourceDatabaseCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
+    customEditability: CustomEditabilityEnum;
+    customEditabilityExpression: string;
+    readOnlyStyle: ReadOnlyStyleEnum;
+    onChangeEvent: {} | null;
+    onChangeDatabaseEvent: {} | null;
+    ariaRequired: string;
+    groupName: string;
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/typings/declare-svg.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/typings/declare-svg.ts
new file mode 100644
index 0000000000..6949b2e571
--- /dev/null
+++ b/packages/pluggableWidgets/checkbox-radio-selection-web/typings/declare-svg.ts
@@ -0,0 +1,4 @@
+declare module "*.svg" {
+    const value: string;
+    export default value;
+} 
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 40d480cc17..c7133980fd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -833,6 +833,46 @@ importers:
         specifier: ^7.0.3
         version: 7.0.3
 
+  packages/pluggableWidgets/checkbox-radio-selection-web:
+    dependencies:
+      classnames:
+        specifier: ^2.3.2
+        version: 2.5.1
+    devDependencies:
+      '@mendix/automation-utils':
+        specifier: workspace:*
+        version: link:../../../automation/utils
+      '@mendix/eslint-config-web-widgets':
+        specifier: workspace:*
+        version: link:../../shared/eslint-config-web-widgets
+      '@mendix/pluggable-widgets-tools':
+        specifier: 10.21.2
+        version: 10.21.2(@jest/transform@29.7.0)(@jest/types@29.6.3)(@swc/core@1.7.26(@swc/helpers@0.5.15))(@types/babel__core@7.20.3)(@types/node@22.14.1)(picomatch@4.0.2)(react-dom@18.2.0(react@18.2.0))(react-native@0.75.3(@babel/core@7.27.4)(@babel/preset-env@7.26.9(@babel/core@7.27.4))(@types/react@18.2.36)(react@18.2.0)(typescript@5.8.2))(react@18.2.0)(tslib@2.8.1)
+      '@mendix/prettier-config-web-widgets':
+        specifier: workspace:*
+        version: link:../../shared/prettier-config-web-widgets
+      '@mendix/run-e2e':
+        specifier: workspace:^*
+        version: link:../../../automation/run-e2e
+      '@mendix/widget-plugin-component-kit':
+        specifier: workspace:*
+        version: link:../../shared/widget-plugin-component-kit
+      '@mendix/widget-plugin-grid':
+        specifier: workspace:*
+        version: link:../../shared/widget-plugin-grid
+      '@mendix/widget-plugin-hooks':
+        specifier: workspace:*
+        version: link:../../shared/widget-plugin-hooks
+      '@mendix/widget-plugin-platform':
+        specifier: workspace:*
+        version: link:../../shared/widget-plugin-platform
+      '@mendix/widget-plugin-test-utils':
+        specifier: workspace:*
+        version: link:../../shared/widget-plugin-test-utils
+      cross-env:
+        specifier: ^7.0.3
+        version: 7.0.3
+
   packages/pluggableWidgets/color-picker-web:
     dependencies:
       classnames:
@@ -2879,10 +2919,6 @@ packages:
   '@babel/code-frame@7.12.11':
     resolution: {integrity: sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==}
 
-  '@babel/code-frame@7.26.2':
-    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -2970,10 +3006,6 @@ packages:
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.25.9':
-    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-validator-identifier@7.27.1':
     resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
     engines: {node: '>=6.9.0'}
@@ -6723,10 +6755,6 @@ packages:
   es-array-method-boxes-properly@1.0.0:
     resolution: {integrity: sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==}
 
-  es-define-property@1.0.0:
-    resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
-    engines: {node: '>= 0.4'}
-
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -10022,10 +10050,6 @@ packages:
     resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
     engines: {node: '>= 0.4'}
 
-  regexp.prototype.flags@1.5.2:
-    resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
-    engines: {node: '>= 0.4'}
-
   regexp.prototype.flags@1.5.4:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
@@ -11499,12 +11523,6 @@ snapshots:
     dependencies:
       '@babel/highlight': 7.25.7
 
-  '@babel/code-frame@7.26.2':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.25.9
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
@@ -11642,8 +11660,6 @@ snapshots:
 
   '@babel/helper-string-parser@7.27.1': {}
 
-  '@babel/helper-validator-identifier@7.25.9': {}
-
   '@babel/helper-validator-identifier@7.27.1': {}
 
   '@babel/helper-validator-option@7.27.1': {}
@@ -12567,7 +12583,7 @@ snapshots:
   '@commitlint/is-ignored@19.8.0':
     dependencies:
       '@commitlint/types': 19.8.0
-      semver: 7.7.1
+      semver: 7.7.2
 
   '@commitlint/lint@19.8.0':
     dependencies:
@@ -12661,7 +12677,7 @@ snapshots:
   '@eslint/config-array@0.19.2':
     dependencies:
       '@eslint/object-schema': 2.1.6
-      debug: 4.3.7
+      debug: 4.4.1
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -12703,7 +12719,7 @@ snapshots:
   '@eslint/eslintrc@3.3.1':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.7
+      debug: 4.4.1
       espree: 10.3.0
       globals: 14.0.0
       ignore: 5.3.2
@@ -13004,7 +13020,7 @@ snapshots:
   '@jridgewell/gen-mapping@0.3.5':
     dependencies:
       '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
   '@jridgewell/gen-mapping@0.3.8':
@@ -13526,7 +13542,7 @@ snapshots:
 
   '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.36)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.25.7
+      '@babel/runtime': 7.27.6
       react: 18.2.0
     optionalDependencies:
       '@types/react': 18.2.36
@@ -13561,7 +13577,7 @@ snapshots:
 
   '@radix-ui/react-slot@1.0.2(@types/react@18.2.36)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.25.7
+      '@babel/runtime': 7.27.6
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.36)(react@18.2.0)
       react: 18.2.0
     optionalDependencies:
@@ -14547,7 +14563,7 @@ snapshots:
       '@typescript-eslint/types': 8.29.0
       '@typescript-eslint/typescript-estree': 8.29.0(typescript@5.8.2)
       '@typescript-eslint/visitor-keys': 8.29.0
-      debug: 4.3.7
+      debug: 4.4.1
       eslint: 9.23.0(jiti@2.4.2)
       typescript: 5.8.2
     transitivePeerDependencies:
@@ -14589,7 +14605,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 8.29.0(typescript@5.8.2)
       '@typescript-eslint/utils': 8.29.0(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2)
-      debug: 4.3.7
+      debug: 4.4.1
       eslint: 9.23.0(jiti@2.4.2)
       ts-api-utils: 2.1.0(typescript@5.8.2)
       typescript: 5.8.2
@@ -14636,7 +14652,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 6.13.2
       '@typescript-eslint/visitor-keys': 6.13.2
-      debug: 4.3.7
+      debug: 4.4.1
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.7.2
@@ -14650,8 +14666,8 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 8.29.0
       '@typescript-eslint/visitor-keys': 8.29.0
-      debug: 4.3.7
-      fast-glob: 3.3.2
+      debug: 4.4.1
+      fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.7.2
@@ -14684,7 +14700,7 @@ snapshots:
       '@typescript-eslint/types': 6.13.2
       '@typescript-eslint/typescript-estree': 6.13.2(typescript@5.8.2)
       eslint: 9.23.0(jiti@2.4.2)
-      semver: 7.7.1
+      semver: 7.7.2
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -14718,7 +14734,7 @@ snapshots:
   '@typescript-eslint/visitor-keys@8.29.0':
     dependencies:
       '@typescript-eslint/types': 8.29.0
-      eslint-visitor-keys: 4.2.0
+      eslint-visitor-keys: 4.2.1
 
   '@uiw/codemirror-extensions-basic-setup@4.23.13(@codemirror/autocomplete@6.16.2(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.34.2)(@lezer/common@1.2.2))(@codemirror/commands@6.8.1)(@codemirror/language@6.10.2)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.2)':
     dependencies:
@@ -14925,7 +14941,7 @@ snapshots:
 
   acorn-globals@7.0.1:
     dependencies:
-      acorn: 8.14.0
+      acorn: 8.15.0
       acorn-walk: 8.2.0
 
   acorn-import-attributes@1.9.5(acorn@8.12.1):
@@ -15103,11 +15119,11 @@ snapshots:
 
   array-includes@3.1.8:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
-      get-intrinsic: 1.2.4
+      es-abstract: 1.23.9
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
       is-string: 1.1.1
 
   array-normalize@1.1.4:
@@ -15421,10 +15437,10 @@ snapshots:
 
   call-bind@1.0.7:
     dependencies:
-      es-define-property: 1.0.0
+      es-define-property: 1.0.1
       es-errors: 1.3.0
       function-bind: 1.1.2
-      get-intrinsic: 1.2.4
+      get-intrinsic: 1.3.0
       set-function-length: 1.2.2
 
   call-bind@1.0.8:
@@ -16429,7 +16445,7 @@ snapshots:
       '@one-ini/wasm': 0.1.1
       commander: 10.0.1
       minimatch: 9.0.1
-      semver: 7.7.1
+      semver: 7.7.2
 
   ee-first@1.1.1: {}
 
@@ -16546,13 +16562,13 @@ snapshots:
       data-view-buffer: 1.0.1
       data-view-byte-length: 1.0.1
       data-view-byte-offset: 1.0.0
-      es-define-property: 1.0.0
+      es-define-property: 1.0.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       es-set-tostringtag: 2.0.3
       es-to-primitive: 1.2.1
       function.prototype.name: 1.1.8
-      get-intrinsic: 1.2.4
+      get-intrinsic: 1.3.0
       get-symbol-description: 1.0.2
       globalthis: 1.0.3
       gopd: 1.2.0
@@ -16560,7 +16576,7 @@ snapshots:
       has-proto: 1.0.3
       has-symbols: 1.1.0
       hasown: 2.0.2
-      internal-slot: 1.0.7
+      internal-slot: 1.1.0
       is-array-buffer: 3.0.4
       is-callable: 1.2.7
       is-data-view: 1.0.1
@@ -16573,7 +16589,7 @@ snapshots:
       object-inspect: 1.13.4
       object-keys: 1.1.1
       object.assign: 4.1.7
-      regexp.prototype.flags: 1.5.2
+      regexp.prototype.flags: 1.5.4
       safe-array-concat: 1.1.2
       safe-regex-test: 1.0.3
       string.prototype.trim: 1.2.10
@@ -16642,10 +16658,6 @@ snapshots:
 
   es-array-method-boxes-properly@1.0.0: {}
 
-  es-define-property@1.0.0:
-    dependencies:
-      get-intrinsic: 1.3.0
-
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
@@ -17090,7 +17102,7 @@ snapshots:
     dependencies:
       acorn: 8.14.0
       acorn-jsx: 5.3.2(acorn@8.14.0)
-      eslint-visitor-keys: 4.2.0
+      eslint-visitor-keys: 4.2.1
 
   espree@10.4.0:
     dependencies:
@@ -17417,7 +17429,7 @@ snapshots:
     dependencies:
       es-errors: 1.3.0
       function-bind: 1.1.2
-      has-proto: 1.0.3
+      has-proto: 1.2.0
       has-symbols: 1.1.0
       hasown: 2.0.2
 
@@ -17592,7 +17604,7 @@ snapshots:
       '@types/glob': 7.2.0
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       glob: 7.2.3
       ignore: 5.3.2
       merge2: 1.4.1
@@ -17602,7 +17614,7 @@ snapshots:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       ignore: 5.3.2
       merge2: 1.4.1
       slash: 3.0.0
@@ -17818,14 +17830,14 @@ snapshots:
     dependencies:
       '@tootallnate/once': 2.0.0
       agent-base: 6.0.2
-      debug: 4.3.7
+      debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.7
+      debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
 
@@ -17917,7 +17929,7 @@ snapshots:
     dependencies:
       es-errors: 1.3.0
       hasown: 2.0.2
-      side-channel: 1.0.4
+      side-channel: 1.1.0
 
   internal-slot@1.1.0:
     dependencies:
@@ -17977,7 +17989,7 @@ snapshots:
 
   is-boolean-object@1.1.2:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       has-tostringtag: 1.0.2
 
   is-boolean-object@1.2.2:
@@ -18089,7 +18101,7 @@ snapshots:
 
   is-reference@1.2.1:
     dependencies:
-      '@types/estree': 1.0.6
+      '@types/estree': 1.0.8
 
   is-regex@1.1.4:
     dependencies:
@@ -18138,7 +18150,7 @@ snapshots:
 
   is-symbol@1.0.4:
     dependencies:
-      has-symbols: 1.0.3
+      has-symbols: 1.1.0
 
   is-symbol@1.1.1:
     dependencies:
@@ -19624,10 +19636,10 @@ snapshots:
 
   object.fromentries@2.0.8:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
+      es-abstract: 1.23.9
+      es-object-atoms: 1.1.1
 
   object.hasown@1.1.3:
     dependencies:
@@ -19776,7 +19788,7 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.26.2
+      '@babel/code-frame': 7.27.1
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -20562,7 +20574,7 @@ snapshots:
 
   react-error-boundary@3.1.4(react@18.2.0):
     dependencies:
-      '@babel/runtime': 7.25.7
+      '@babel/runtime': 7.27.6
       react: 18.2.0
 
   react-is@16.13.1: {}
@@ -20848,7 +20860,7 @@ snapshots:
 
   redux@4.2.1:
     dependencies:
-      '@babel/runtime': 7.22.5
+      '@babel/runtime': 7.27.6
 
   reflect.getprototypeof@1.0.10:
     dependencies:
@@ -20881,13 +20893,6 @@ snapshots:
       define-properties: 1.2.1
       set-function-name: 2.0.1
 
-  regexp.prototype.flags@1.5.2:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-errors: 1.3.0
-      set-function-name: 2.0.1
-
   regexp.prototype.flags@1.5.4:
     dependencies:
       call-bind: 1.0.8
@@ -21011,7 +21016,7 @@ snapshots:
 
   resolve@2.0.0-next.5:
     dependencies:
-      is-core-module: 2.13.1
+      is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
@@ -21421,7 +21426,7 @@ snapshots:
       get-stdin: 9.0.0
       git-hooks-list: 3.2.0
       is-plain-obj: 4.1.0
-      semver: 7.7.1
+      semver: 7.7.2
       sort-object-keys: 1.1.3
       tinyglobby: 0.2.12
 
@@ -21432,7 +21437,7 @@ snapshots:
       get-stdin: 9.0.0
       git-hooks-list: 3.2.0
       is-plain-obj: 4.1.0
-      semver: 7.7.1
+      semver: 7.7.2
       sort-object-keys: 1.1.3
       tinyglobby: 0.2.12
 
@@ -21551,7 +21556,7 @@ snapshots:
       define-properties: 1.2.1
       es-abstract: 1.23.9
       es-errors: 1.3.0
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
       get-intrinsic: 1.3.0
       gopd: 1.2.0
       has-symbols: 1.1.0