mendix · gjulivan · Mar 27, 2026
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added new options for readonly style: "Selected content only". This options will display text of only the selected items when widget is in readonly mode. This is also alters the previous readonly mode: "Content only", to now display text of all available items.
+
 ## [1.1.1] - 2026-02-24
 
 ### Fixed

@@ -253,6 +253,7 @@
                     <enumerationValues>
                         <enumerationValue key="bordered">Control</enumerationValue>
                         <enumerationValue key="text">Content only</enumerationValue>
+                        <enumerationValue key="selectedText">Selected content only</enumerationValue>
                     </enumerationValues>
                 </property>
             </propertyGroup>

@@ -4,7 +4,7 @@
 import { getValidationErrorId } from "../../helpers/utils";
 import { useWrapperProps } from "../../hooks/useWrapperProps";
 import { CaptionContent } from "../CaptionContent";
 import { ValidationAlert } from "@mendix/widget-plugin-component-kit/Alert";
 import { Placeholder } from "../Placeholder";

 export function CheckboxSelection({
@@ -48,7 +48,9 @@
             {options.map((optionId, index) => {
                 const isSelected = currentIds.includes(optionId);
                 const checkboxId = `${inputId}-checkbox-${index}`;
-
+                if (isReadOnly && !isSelected && readOnlyStyle === "selectedText") {
+                    return null;
+                }
                 return (
                     <div
                         key={optionId}

@@ -1,5 +1,5 @@
 import { If } from "@mendix/widget-plugin-component-kit/If";
 import classNames from "classnames";
 import { ChangeEvent, MouseEvent, ReactElement } from "react";
 import { SelectionBaseProps, SingleSelector } from "../../helpers/types";
 import { getValidationErrorId } from "../../helpers/utils";
@@ -57,7 +57,7 @@
             {options.map((optionId, index) => {
                 const isSelected = currentId === optionId;
                 const controlId = `${inputId}-${selector.controlType}-${index}`;
-                if (isReadOnly && !isSelected && readOnlyStyle === "text") {
+                if (isReadOnly && !isSelected && readOnlyStyle === "selectedText") {
                     return null;
                 }
 
@@ -68,7 +68,7 @@
                             "widget-checkbox-radio-selection-item-selected": isSelected
                         })}
                     >
-                        <If condition={!isReadOnly || readOnlyStyle !== "text"}>
+                        <If condition={!isReadOnly || readOnlyStyle !== "selectedText"}>
                             <input
                                 type={selector.controlType}
                                 id={controlId}

@@ -1,14 +1,24 @@
 // Checkbox Radio Selection Widget Styles
 .widget-checkbox-radio-selection {
-    display: block;
+    display: flex;
     position: relative;
     min-width: 0;
+    align-items: center;
 
     &-readonly {
         &.widget-checkbox-radio-selection-readonly-text {
+            .checkbox-item,
             .radio-item {
-                display: none;
+                input {
+                    display: none;
+                }
+            }
+        }
 
+        &.widget-checkbox-radio-selection-readonly-selectedText {
+            .radio-item,
+            .checkbox-item {
+                display: none;
                 &.widget-checkbox-radio-selection-item-selected {
                     display: block;
 
@@ -28,7 +38,9 @@
     &-item {
         display: flex;
         align-items: center;
-        margin-bottom: 5px;
+        &:not(:last-child) {
+            margin-bottom: var(--spacing-smaller, 4px);
+        }
         input {
             flex: 0 0 16px;
         }

@@ -27,7 +27,7 @@ export type ControlTypeEnum = "checkbox" | "radio";
 
 export type CustomEditabilityEnum = "default" | "never" | "conditionally";
 
-export type ReadOnlyStyleEnum = "bordered" | "text";
+export type ReadOnlyStyleEnum = "bordered" | "text" | "selectedText";
 
 export interface OptionsSourceStaticDataSourcePreviewType {
     staticDataSourceValue: string;