feat: allow boolean to choose for checkbox type

gjulivan · gjulivan · commit b25d5cea1e0e · 2025-07-24T01:59:26.000+02:00
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorConfig.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorConfig.ts
@@ -43,6 +43,10 @@ export function getProperties(
         hidePropertiesIn(defaultProperties, values, ["customEditability", "customEditabilityExpression"]);
     }
 
+    if (values.optionsSourceType !== "boolean") {
+        hidePropertiesIn(defaultProperties, values, ["controlType"]);
+    }
+
     if (values.source === "context") {
         hidePropertiesIn(defaultProperties, values, [
             "staticAttribute",
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.xml b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.xml
@@ -1,6 +1,6 @@
 <?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>
+    <name>Check box / Radio button</name>
     <description />
     <studioProCategory>Input elements</studioProCategory>
     <studioCategory>Display</studioCategory>
@@ -28,6 +28,14 @@
                         <enumerationValue key="boolean">Boolean</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="controlType" type="enumeration" defaultValue="checkbox" required="true">
+                    <caption>Component</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="checkbox">Checkbox</enumerationValue>
+                        <enumerationValue key="radio">Radio button</enumerationValue>
+                    </enumerationValues>
+                </property>
 
                 <!-- ENUM & BOOLEAN-->
                 <property key="attributeEnumeration" type="attribute" required="true" setLabel="true">
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
@@ -47,7 +47,7 @@ export function RadioSelection({
                             })}
                         >
                             <input
-                                type="radio"
+                                type={selector.controlType}
                                 id={radioId}
                                 name={name}
                                 value={optionId}
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
@@ -8,6 +8,7 @@ export class AssociationSingleSelector
     implements SingleSelector
 {
     type = "single" as const;
+    controlType: "checkbox" | "radio" = "radio";
 
     updateProps(props: CheckboxRadioSelectionContainerProps): void {
         super.updateProps(props);
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
@@ -13,6 +13,7 @@ export class AssociationPreviewSelector implements SingleSelector {
     status: Status = "available";
     attributeType?: "string" | "boolean" | "big" | "date" | undefined;
     selectorType?: "context" | "database" | "static" | undefined;
+    controlType: "checkbox" | "radio" = "radio";
     // type: "single";
     readOnly: boolean;
     validation?: string | undefined;
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
@@ -16,6 +16,7 @@ export class DatabaseSingleSelector<T extends string | Big, R extends EditableVa
     attributeType: "string" | "big" | "boolean" | "date" = "string";
     selectorType: "context" | "database" | "static" = "database";
     status: Status = "unavailable";
+    controlType: "checkbox" | "radio" = "radio";
     options: DatabaseOptionsProvider;
     caption: DatabaseCaptionsProvider;
     clearable = false;
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
@@ -13,7 +13,7 @@ export class DatabasePreviewSelector implements SingleSelector {
     status: Status = "available";
     attributeType?: "string" | "boolean" | "big" | "date" | undefined;
     selectorType?: "context" | "database" | "static" | undefined;
-    // type: "single";
+    controlType: "checkbox" | "radio" = "radio";
     readOnly: boolean;
     validation?: string | undefined;
     clearable: boolean = false;
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
@@ -12,6 +12,7 @@ import { extractEnumerationProps } from "./utils";
 export class EnumBooleanSingleSelector implements SingleSelector {
     status: Status = "unavailable";
     type = "single" as const;
+    controlType: "checkbox" | "radio" = "radio";
     validation?: string = undefined;
     private isBoolean = false;
     private _attr: EditableValue<string | boolean> | undefined;
@@ -58,6 +59,7 @@ export class EnumBooleanSingleSelector implements SingleSelector {
         this.currentId = attr.value?.toString() ?? null;
         this.readOnly = attr.readOnly;
         this.validation = attr.validation;
+        this.controlType = props.controlType;
     }
 
     setValue(value: string | null): void {
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
@@ -13,7 +13,7 @@ export class StaticPreviewSelector implements SingleSelector {
     status: Status = "available";
     attributeType?: "string" | "boolean" | "big" | "date" | undefined;
     selectorType?: "context" | "database" | "static" | undefined;
-    // type: "single";
+    controlType: "checkbox" | "radio" = "radio";
     readOnly: boolean;
     validation?: string | undefined;
     clearable: boolean = false;
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
@@ -17,6 +17,7 @@ export class StaticSingleSelector implements SingleSelector {
     attributeType: "string" | "big" | "boolean" | "date" = "string";
     selectorType: "context" | "database" | "static" = "static";
     status: Status = "unavailable";
+    controlType: "checkbox" | "radio" = "radio";
     options: StaticOptionsProvider;
     caption: StaticCaptionsProvider;
     clearable = false;
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/types.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/types.ts
@@ -70,7 +70,9 @@ interface SelectorBase<T, V> {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface SingleSelector extends SelectorBase<"single", string> {}
+export interface SingleSelector extends SelectorBase<"single", string> {
+    controlType: "checkbox" | "radio";
+}
 
 export interface MultiSelector extends SelectorBase<"multi", string[]> {
     getOptions(): string[];
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/typings/CheckboxRadioSelectionProps.d.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/typings/CheckboxRadioSelectionProps.d.ts
@@ -11,6 +11,8 @@ export type SourceEnum = "context" | "database" | "static";
 
 export type OptionsSourceTypeEnum = "association" | "enumeration" | "boolean";
 
+export type ControlTypeEnum = "checkbox" | "radio";
+
 export type OptionsSourceAssociationCaptionTypeEnum = "attribute" | "expression";
 
 export type OptionsSourceDatabaseCaptionTypeEnum = "attribute" | "expression";
@@ -39,6 +41,7 @@ export interface CheckboxRadioSelectionContainerProps {
     id: string;
     source: SourceEnum;
     optionsSourceType: OptionsSourceTypeEnum;
+    controlType: ControlTypeEnum;
     attributeEnumeration: EditableValue<string>;
     attributeBoolean: EditableValue<boolean>;
     optionsSourceDatabaseDataSource?: ListValue;
@@ -72,6 +75,7 @@ export interface CheckboxRadioSelectionPreviewProps {
     translate: (text: string) => string;
     source: SourceEnum;
     optionsSourceType: OptionsSourceTypeEnum;
+    controlType: ControlTypeEnum;
     attributeEnumeration: string;
     attributeBoolean: string;
     optionsSourceDatabaseDataSource: {} | { caption: string } | { type: string } | null;

Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ export function RadioSelection({`
`47`	`47`	`})}`
`48`	`48`	`>`
`49`	`49`	`<input`
`50`		`- type="radio"`
	`50`	`+ type={selector.controlType}`
`51`	`51`	`id={radioId}`
`52`	`52`	`name={name}`
`53`	`53`	`value={optionId}`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@ export class AssociationSingleSelector`
`8`	`8`	`implements SingleSelector`
`9`	`9`	`{`
`10`	`10`	`type = "single" as const;`
	`11`	`+ controlType: "checkbox" \| "radio" = "radio";`
`11`	`12`
`12`	`13`	`updateProps(props: CheckboxRadioSelectionContainerProps): void {`
`13`	`14`	`super.updateProps(props);`