From 05bc8085281cc370cc56a5207cb04de90c5efff1 Mon Sep 17 00:00:00 2001
From: Szymon Tondowski <szymon.tondowski@synergycodes.com>
Date: Wed, 26 Aug 2026 09:44:51 +0200
Subject: [PATCH 1/3] fix(sdk): readonly mode is not overridden by the local
 rule

---
 .../ai-tools-control/ai-tools-control.tsx     | 14 ++++---
 .../date-picker-control.tsx                   |  7 ++--
 .../decision-branches-control.tsx             |  9 +++--
 .../dynamic-conditions-control.tsx            |  9 +++--
 .../select-control/select-control.tsx         |  7 ++--
 .../switch-control/switch-control.tsx         |  7 ++--
 .../text-area-control/text-area-control.tsx   |  9 +++--
 .../controls/text-control/text-control.tsx    | 10 ++---
 .../variable-text-area-control.tsx            | 10 ++---
 .../variable-text-control.tsx                 | 10 ++---
 .../hooks/use-is-control-editable.ts          | 38 +++++++++++++++++++
 packages/sdk/src/types/controls.ts            | 35 +++++++++++++++++
 12 files changed, 124 insertions(+), 41 deletions(-)
 create mode 100644 packages/sdk/src/features/json-form/hooks/use-is-control-editable.ts

diff --git a/packages/sdk/src/features/json-form/controls/ai-tools-control/ai-tools-control.tsx b/packages/sdk/src/features/json-form/controls/ai-tools-control/ai-tools-control.tsx
index cc11d8182..54db3c0b4 100644
--- a/packages/sdk/src/features/json-form/controls/ai-tools-control/ai-tools-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/ai-tools-control/ai-tools-control.tsx
@@ -9,15 +9,19 @@ import styles from './ai-tools-control.module.css';
 
 import { FormControlWithLabel } from '../../../../components/form/form-control-with-label/form-control-with-label';
 import { closeModal } from '../../../modals/stores/use-modal-store';
+import { useIsControlEditable } from '../../hooks/use-is-control-editable';
 import type { AiAgentTool, AiToolsControlProps } from '../../types/controls';
 import { createControlRenderer } from '../../utils/rendering';
 import { createAiTool, hasAnyValue } from './create-ai-tool';
 import { openAddToolModal } from './open-add-tool-modal';
 import { toolOptions } from './select-options';
 
-function AiToolsControl({ path, handleChange, data, enabled, uischema }: AiToolsControlProps) {
+function AiToolsControl(props: AiToolsControlProps) {
+  const { path, handleChange, data } = props;
+  const isEditable = useIsControlEditable(props);
+
   const { t } = useTranslation(undefined, { keyPrefix: 'aiTools' });
-  const isDisabled = !enabled || uischema.disabled === true;
+
   const handleSubmit = useCallback(
     (change: AiAgentTool) => {
       if (hasAnyValue(change)) {
@@ -61,7 +65,7 @@ function AiToolsControl({ path, handleChange, data, enabled, uischema }: AiTools
           variant: 'secondary',
           className: styles['selected-tool-button'],
           onClick: () => openEditorModal(toolData),
-          disabled: isDisabled,
+          disabled: !isEditable,
         };
 
         return (
@@ -75,14 +79,14 @@ function AiToolsControl({ path, handleChange, data, enabled, uischema }: AiTools
               ) : (
                 <Button {...sharedButtonProps}>{label}</Button>
               )}
-              <NavButton onClick={() => onRemoveTool(toolData.id)} disabled={isDisabled}>
+              <NavButton onClick={() => onRemoveTool(toolData.id)} disabled={!isEditable}>
                 <Trash weight="bold" />
               </NavButton>
             </div>
           </FormControlWithLabel>
         );
       })}
-      <Button variant="primary" onClick={(_) => openEditorModal()} disabled={isDisabled}>
+      <Button variant="primary" onClick={(_) => openEditorModal()} disabled={!isEditable}>
         <PlusCircle />
         {t('addToolSlot')}
       </Button>
diff --git a/packages/sdk/src/features/json-form/controls/date-picker-control/date-picker-control.tsx b/packages/sdk/src/features/json-form/controls/date-picker-control/date-picker-control.tsx
index 5ec0260da..3a3c0d689 100644
--- a/packages/sdk/src/features/json-form/controls/date-picker-control/date-picker-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/date-picker-control/date-picker-control.tsx
@@ -1,12 +1,13 @@
 import { DatePicker, type DatePickerProps } from '@workflowbuilder/ui';
 
+import { useIsControlEditable } from '../../hooks/use-is-control-editable';
 import type { DatePickerControlProps } from '../../types/controls';
 import { createControlRenderer } from '../../utils/rendering';
 import { ControlWrapper } from '../control-wrapper';
 
 function DatePickerControl(props: DatePickerControlProps) {
-  const { data, handleChange, path, enabled, uischema } = props;
-  const isDisabled = !enabled || uischema.disabled === true;
+  const { data, handleChange, path } = props;
+  const isEditable = useIsControlEditable(props);
 
   const onChange: DatePickerProps['onChange'] = (value) => {
     handleChange(path, value?.toString());
@@ -14,7 +15,7 @@ function DatePickerControl(props: DatePickerControlProps) {
 
   return (
     <ControlWrapper {...props}>
-      <DatePicker value={data} onChange={onChange} disabled={isDisabled} />
+      <DatePicker value={data} onChange={onChange} disabled={!isEditable} />
     </ControlWrapper>
   );
 }
diff --git a/packages/sdk/src/features/json-form/controls/decision-branches-control/decision-branches-control.tsx b/packages/sdk/src/features/json-form/controls/decision-branches-control/decision-branches-control.tsx
index b0616ccc2..585fc15fa 100644
--- a/packages/sdk/src/features/json-form/controls/decision-branches-control/decision-branches-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/decision-branches-control/decision-branches-control.tsx
@@ -4,14 +4,15 @@ import { useTranslation } from 'react-i18next';
 import styles from './decision-branches-control.module.css';
 
 import { PlaceholderButton } from '../../../diagram/nodes/components/placeholder-button/placeholder-button';
+import { useIsControlEditable } from '../../hooks/use-is-control-editable';
 import type { DecisionBranch, DecisionBranchesControlProps } from '../../types/controls';
 import { createControlRenderer } from '../../utils/rendering';
 import { BranchCard } from './branch-card/branch-card';
 import { createDecisionBranch } from './create-decision-branch';
 
 function DecisionBranchesControl(props: DecisionBranchesControlProps) {
-  const { data = [], handleChange, path, enabled, uischema } = props;
-  const isDisabled = !enabled || uischema.disabled === true;
+  const { data = [], handleChange, path } = props;
+  const isEditable = useIsControlEditable(props);
 
   const decisionBranches = data as DecisionBranch[];
 
@@ -33,7 +34,7 @@ function DecisionBranchesControl(props: DecisionBranchesControlProps) {
   }
 
   function onAddBranch() {
-    if (isDisabled) {
+    if (!isEditable) {
       return;
     }
     handleChange(path, [...decisionBranches, createDecisionBranch()]);
@@ -48,7 +49,7 @@ function DecisionBranchesControl(props: DecisionBranchesControlProps) {
           branch={branch}
           onUpdate={onUpdateBranch}
           onRemove={onRemoveBranch}
-          enabled={!isDisabled}
+          enabled={isEditable}
         />
       ))}
       <PlaceholderButton onClick={onAddBranch} label={t('decisionBranches.addBranch')} />
diff --git a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.tsx b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.tsx
index ef6327bab..20877234e 100644
--- a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.tsx
@@ -8,6 +8,7 @@ import { Icon } from '@workflow-builder/icons';
 import styles from './dynamic-conditions-control.module.css';
 
 import { closeModal, openModal } from '../../../modals/stores/use-modal-store';
+import { useIsControlEditable } from '../../hooks/use-is-control-editable';
 import type { DynamicCondition, DynamicConditionsControlProps } from '../../types/controls';
 import { createControlRenderer } from '../../utils/rendering';
 import { Dependencies } from './dependencies/dependencies';
@@ -15,8 +16,8 @@ import { ConditionModalFooter } from './dynamic-condition-modal-footer/condition
 import { ConditionsForm, type ConditionsFormHandle } from './dynamic-conditions-form/conditions-form';
 
 function DynamicConditionsControl(props: DynamicConditionsControlProps) {
-  const { data = [], handleChange, path, enabled, uischema } = props;
-  const isDisabled = !enabled || uischema.disabled === true;
+  const { data = [], handleChange, path } = props;
+  const isEditable = useIsControlEditable(props);
   const formRef = useRef<ConditionsFormHandle>(null);
 
   const { t } = useTranslation(undefined, { keyPrefix: 'conditions' });
@@ -44,11 +45,11 @@ function DynamicConditionsControl(props: DynamicConditionsControlProps) {
     <div className={styles['container']}>
       <div className={styles['header']}>
         <span className={clsx('ax-public-h10', styles['title'])}>{t('title')}</span>
-        <NavButton size="small" onClick={openEditorModal} tooltip={t('title')} disabled={isDisabled}>
+        <NavButton size="small" onClick={openEditorModal} tooltip={t('title')} disabled={!isEditable}>
           <Icon name="FrameCorners" size="small" />
         </NavButton>
       </div>
-      <Dependencies conditions={data} onClick={openEditorModal} disabled={isDisabled} />
+      <Dependencies conditions={data} onClick={openEditorModal} disabled={!isEditable} />
       <span className={styles['tag']}>{t('totalNumber', { count: data.length })}</span>
     </div>
   );
diff --git a/packages/sdk/src/features/json-form/controls/select-control/select-control.tsx b/packages/sdk/src/features/json-form/controls/select-control/select-control.tsx
index cdf1df0b0..c8ecad527 100644
--- a/packages/sdk/src/features/json-form/controls/select-control/select-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/select-control/select-control.tsx
@@ -3,13 +3,14 @@ import { Select, type SelectBaseProps } from '@workflowbuilder/ui';
 import { Icon } from '@workflow-builder/icons';
 
 import type { PrimitiveFieldSchema } from '../../../../node/node-schema';
+import { useIsControlEditable } from '../../hooks/use-is-control-editable';
 import type { SelectControlProps } from '../../types/controls';
 import { createControlRenderer } from '../../utils/rendering';
 import { ControlWrapper } from '../control-wrapper';
 
 function SelectControl(props: SelectControlProps) {
-  const { data, handleChange, path, enabled, schema, uischema } = props;
-  const isDisabled = !enabled || uischema.disabled === true;
+  const { data, handleChange, path, schema } = props;
+  const isEditable = useIsControlEditable(props);
 
   const items = (schema as PrimitiveFieldSchema).options?.map((option) =>
     option.type === 'separator' || !option.icon
@@ -29,7 +30,7 @@ function SelectControl(props: SelectControlProps) {
       <Select
         value={data ?? null}
         items={items ?? []}
-        disabled={isDisabled}
+        disabled={!isEditable}
         onChange={onChange}
         placeholder={schema.placeholder}
       />
diff --git a/packages/sdk/src/features/json-form/controls/switch-control/switch-control.tsx b/packages/sdk/src/features/json-form/controls/switch-control/switch-control.tsx
index fd24f528b..8d6cb5a88 100644
--- a/packages/sdk/src/features/json-form/controls/switch-control/switch-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/switch-control/switch-control.tsx
@@ -1,12 +1,13 @@
 import { Switch } from '@workflowbuilder/ui';
 
+import { useIsControlEditable } from '../../hooks/use-is-control-editable';
 import type { SwitchControlProps } from '../../types/controls';
 import { createControlRenderer } from '../../utils/rendering';
 import { ControlWrapper } from '../control-wrapper';
 
 function SwitchControl(props: SwitchControlProps) {
-  const { data, handleChange, path, enabled, uischema } = props;
-  const isDisabled = !enabled || uischema.disabled === true;
+  const { data, handleChange, path } = props;
+  const isEditable = useIsControlEditable(props);
 
   function onChange(checked: boolean) {
     handleChange(path, checked);
@@ -14,7 +15,7 @@ function SwitchControl(props: SwitchControlProps) {
 
   return (
     <ControlWrapper {...props}>
-      <Switch disabled={isDisabled} size="medium" checked={data ?? false} onChange={onChange} />
+      <Switch disabled={!isEditable} size="medium" checked={data ?? false} onChange={onChange} />
     </ControlWrapper>
   );
 }
diff --git a/packages/sdk/src/features/json-form/controls/text-area-control/text-area-control.tsx b/packages/sdk/src/features/json-form/controls/text-area-control/text-area-control.tsx
index 4b214092f..47027c89e 100644
--- a/packages/sdk/src/features/json-form/controls/text-area-control/text-area-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/text-area-control/text-area-control.tsx
@@ -1,14 +1,15 @@
 import { TextArea } from '@workflowbuilder/ui';
 import { useEffect, useState } from 'react';
 
+import { useIsControlEditable } from '../../hooks/use-is-control-editable';
 import type { TextAreaControlProps } from '../../types/controls';
 import { createControlRenderer } from '../../utils/rendering';
 import { ControlWrapper } from '../control-wrapper';
 
 function TextAreaControl(props: TextAreaControlProps) {
-  const { data, handleChange, path, enabled, uischema } = props;
-  const { placeholder, minRows, maxRows, disabled } = uischema;
-  const isDisabled = !enabled || disabled === true;
+  const { data, handleChange, path, uischema } = props;
+  const { placeholder, minRows, maxRows } = uischema;
+  const isEditable = useIsControlEditable(props);
 
   const [inputValue, setInputValue] = useState<string>(data);
 
@@ -27,7 +28,7 @@ function TextAreaControl(props: TextAreaControlProps) {
   return (
     <ControlWrapper {...props}>
       <TextArea
-        disabled={isDisabled}
+        disabled={!isEditable}
         value={inputValue}
         minRows={minRows}
         maxRows={maxRows}
diff --git a/packages/sdk/src/features/json-form/controls/text-control/text-control.tsx b/packages/sdk/src/features/json-form/controls/text-control/text-control.tsx
index 5c2c4e9e4..bece97fe4 100644
--- a/packages/sdk/src/features/json-form/controls/text-control/text-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/text-control/text-control.tsx
@@ -1,16 +1,16 @@
 import { Input } from '@workflowbuilder/ui';
 import { useEffect, useState } from 'react';
 
+import { useIsControlEditable } from '../../hooks/use-is-control-editable';
 import type { TextControlProps } from '../../types/controls';
 import { createControlRenderer } from '../../utils/rendering';
 import { ControlWrapper } from '../control-wrapper';
 
 function TextControl(props: TextControlProps) {
-  const { schema, uischema, enabled, data, required, errors, path, handleChange } = props;
-
+  const { schema, uischema, data, required, errors, path, handleChange } = props;
   const { type } = schema;
-  const { placeholder, disabled } = uischema;
-  const isDisabled = !enabled || disabled === true;
+  const { placeholder } = uischema;
+  const isEditable = useIsControlEditable(props);
 
   const isNumberInput = type === 'number';
   const hasErrors = errors.length > 0;
@@ -52,7 +52,7 @@ function TextControl(props: TextControlProps) {
         onChange={onChange}
         onBlur={onBlur}
         error={hasErrors}
-        disabled={isDisabled}
+        disabled={!isEditable}
         placeholder={placeholder}
       />
     </ControlWrapper>
diff --git a/packages/sdk/src/features/json-form/controls/variable-text-area-control/variable-text-area-control.tsx b/packages/sdk/src/features/json-form/controls/variable-text-area-control/variable-text-area-control.tsx
index c8a5665e7..8be803a26 100644
--- a/packages/sdk/src/features/json-form/controls/variable-text-area-control/variable-text-area-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/variable-text-area-control/variable-text-area-control.tsx
@@ -4,19 +4,19 @@ import { useSingleSelectedElement } from '../../../../features/properties-bar/us
 import { VariableText } from '../../../../features/variables/components/variable-text/variable-text';
 import { variablesTypesToExcludeInText } from '../../../../features/variables/constants';
 import { useAvailableVariables } from '../../../../features/variables/hooks/use-available-variables';
+import { useIsControlEditable } from '../../hooks/use-is-control-editable';
 import type { VariableTextAreaControlProps } from '../../types/controls';
 import { createControlRenderer } from '../../utils/rendering';
 import { ControlWrapper } from '../control-wrapper';
 
 function VariableTextAreaControl(props: VariableTextAreaControlProps) {
-  const { data, handleChange, path, errors, enabled, uischema } = props;
-  const { placeholder, disabled } = uischema;
+  const { data, handleChange, path, errors, uischema } = props;
+  const { placeholder } = uischema;
+  const isEditable = useIsControlEditable(props);
   const selection = useSingleSelectedElement();
   // TODO: add param to pick what type of variables are available
   const suggestionGroups = useAvailableVariables(selection?.node?.id, variablesTypesToExcludeInText);
 
-  const isDisabled = !enabled || disabled === true;
-
   const [inputValue, setInputValue] = useState(data ?? '');
 
   useEffect(() => {
@@ -35,7 +35,7 @@ function VariableTextAreaControl(props: VariableTextAreaControlProps) {
         variant="text-area"
         suggestionGroups={suggestionGroups}
         hasError={errors.length > 0}
-        mentionsInputProps={{ disabled: isDisabled, placeholder, onBlur }}
+        mentionsInputProps={{ disabled: !isEditable, placeholder, onBlur }}
       />
     </ControlWrapper>
   );
diff --git a/packages/sdk/src/features/json-form/controls/variable-text-control/variable-text-control.tsx b/packages/sdk/src/features/json-form/controls/variable-text-control/variable-text-control.tsx
index 0eee80849..7d4a6e3fb 100644
--- a/packages/sdk/src/features/json-form/controls/variable-text-control/variable-text-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/variable-text-control/variable-text-control.tsx
@@ -4,19 +4,19 @@ import { VariableText } from '../../../../features/variables/components/variable
 import { variablesTypesToExcludeInText } from '../../../../features/variables/constants';
 import { useAvailableVariables } from '../../../../features/variables/hooks/use-available-variables';
 import { useSingleSelectedElement } from '../../../properties-bar/use-single-selected-element';
+import { useIsControlEditable } from '../../hooks/use-is-control-editable';
 import type { VariableTextControlProps } from '../../types/controls';
 import { createControlRenderer } from '../../utils/rendering';
 import { ControlWrapper } from '../control-wrapper';
 
 function VariableTextControl(props: VariableTextControlProps) {
-  const { data, handleChange, path, errors, enabled, uischema } = props;
-  const { placeholder, disabled } = uischema;
+  const { data, handleChange, path, errors, uischema } = props;
+  const { placeholder } = uischema;
+  const isEditable = useIsControlEditable(props);
   const selection = useSingleSelectedElement();
   // TODO: add param to pick what type of variables are available
   const suggestionGroups = useAvailableVariables(selection?.node?.id, variablesTypesToExcludeInText);
 
-  const isDisabled = !enabled || disabled === true;
-
   const [inputValue, setInputValue] = useState(data ?? '');
 
   useEffect(() => {
@@ -35,7 +35,7 @@ function VariableTextControl(props: VariableTextControlProps) {
         variant="text"
         suggestionGroups={suggestionGroups}
         hasError={errors.length > 0}
-        mentionsInputProps={{ disabled: isDisabled, placeholder, onBlur }}
+        mentionsInputProps={{ disabled: !isEditable, placeholder, onBlur }}
       />
     </ControlWrapper>
   );
diff --git a/packages/sdk/src/features/json-form/hooks/use-is-control-editable.ts b/packages/sdk/src/features/json-form/hooks/use-is-control-editable.ts
new file mode 100644
index 000000000..0b55d06d3
--- /dev/null
+++ b/packages/sdk/src/features/json-form/hooks/use-is-control-editable.ts
@@ -0,0 +1,38 @@
+import type { BaseControlConfig } from '../../../types/controls';
+
+type Params = {
+  enabled?: boolean;
+  config?: BaseControlConfig;
+  uischema: { disabled?: boolean };
+};
+
+/**
+ * Determines whether a control should be editable based on its configuration
+ * and UI schema state.
+ *
+ * The control is considered non-editable when:
+ * - `enabled` is explicitly set to `false`.
+ * - `config.readonly` is explicitly set to `true`.
+ * - `uischema.disabled` is explicitly set to `false`.
+ *
+ * @param controlProps - Configuration and UI schema state of the control.
+ * @returns `true` when the control is editable; otherwise, `false`.
+ */
+export function useIsControlEditable(controlProps: Params): boolean {
+  // Default value usually matching JSONForm readonly
+  if (controlProps.enabled === false) {
+    return false;
+  }
+
+  // uischema "rule" can override default readonly state of the control
+  if (controlProps.config?.readonly === true) {
+    return false;
+  }
+
+  // Optional flag on control
+  if (controlProps.uischema.disabled === false) {
+    return false;
+  }
+
+  return true;
+}
diff --git a/packages/sdk/src/types/controls.ts b/packages/sdk/src/types/controls.ts
index ac609a739..f860a84db 100644
--- a/packages/sdk/src/types/controls.ts
+++ b/packages/sdk/src/types/controls.ts
@@ -99,10 +99,45 @@ export type DatePickerControlElement = Override<
 >;
 export type DatePickerControlProps = ControlProps<Date, DatePickerControlElement>;
 
+/**
+
+ * Configuration options available to all UI schema elements.
+
+ *
+
+ * @see https://jsonforms.io/docs/integrations/react#config
+
+ */
+
+export type BaseControlConfig = {
+  /**
+   * Whether to hide the asterisk displayed in labels for required inputs.
+   */
+  hideRequiredAsterisk?: boolean;
+  /**
+   * Whether all renderers should render the control in a disabled state.
+   */
+  readonly?: boolean;
+  /**
+   * Whether to restrict the number of characters to the `maxLength`
+   * specified in the JSON Schema.
+   */
+  restrict?: boolean;
+  /**
+   * Whether to show input descriptions even when the input is not focused.
+   */
+  showUnfocusedDescription?: boolean;
+  /**
+   * Whether the control should take the full available width.
+   */
+  trim?: boolean;
+};
+
 export type BaseControlProps = Override<
   JsonFormsControlProps,
   {
     uischema: UISchemaControlElement;
+    config?: BaseControlConfig;
   }
 >;
 

From dcc25666798adb9cb6e8e4914ee16ceb84944dbf Mon Sep 17 00:00:00 2001
From: Szymon Tondowski <szymon.tondowski@synergycodes.com>
Date: Wed, 26 Aug 2026 09:56:21 +0200
Subject: [PATCH 2/3] test(sdk): spec added for the hook

---
 .../hooks/use-is-control-editable.spec.ts     | 86 +++++++++++++++++++
 .../hooks/use-is-control-editable.ts          |  6 +-
 packages/sdk/src/types/controls.ts            | 22 -----
 3 files changed, 89 insertions(+), 25 deletions(-)
 create mode 100644 packages/sdk/src/features/json-form/hooks/use-is-control-editable.spec.ts

diff --git a/packages/sdk/src/features/json-form/hooks/use-is-control-editable.spec.ts b/packages/sdk/src/features/json-form/hooks/use-is-control-editable.spec.ts
new file mode 100644
index 000000000..73c31ea71
--- /dev/null
+++ b/packages/sdk/src/features/json-form/hooks/use-is-control-editable.spec.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from 'vitest';
+
+import { useIsControlEditable } from './use-is-control-editable';
+
+describe('useIsControlEditable', () => {
+  describe('enabled', () => {
+    it('should be editable when enabled is true', () => {
+      expect(useIsControlEditable({ enabled: true, uischema: {} })).toBe(true);
+    });
+
+    it('should not be editable when enabled is false', () => {
+      expect(useIsControlEditable({ enabled: false, uischema: {} })).toBe(false);
+    });
+
+    it('should be editable when enabled is absent', () => {
+      expect(useIsControlEditable({ uischema: {} })).toBe(true);
+    });
+  });
+
+  describe('config.readonly', () => {
+    it('should not be editable when config.readonly is true', () => {
+      expect(useIsControlEditable({ config: { readonly: true }, uischema: {} })).toBe(false);
+    });
+
+    it('should be editable when config.readonly is false', () => {
+      expect(useIsControlEditable({ config: { readonly: false }, uischema: {} })).toBe(true);
+    });
+
+    it('should be editable when config has no readonly flag', () => {
+      expect(useIsControlEditable({ config: {}, uischema: {} })).toBe(true);
+    });
+  });
+
+  describe('uischema.disabled', () => {
+    it('should not be editable when uischema.disabled is true', () => {
+      expect(useIsControlEditable({ uischema: { disabled: true } })).toBe(false);
+    });
+
+    it('should be editable when uischema.disabled is false', () => {
+      expect(useIsControlEditable({ uischema: { disabled: false } })).toBe(true);
+    });
+
+    it('should not be editable when uischema.disabled is true even if a rule enabled the control', () => {
+      expect(useIsControlEditable({ enabled: true, uischema: { disabled: true } })).toBe(false);
+    });
+
+    it('should not be editable when readonly is true even if uischema.disabled is false', () => {
+      expect(useIsControlEditable({ config: { readonly: true }, uischema: { disabled: false } })).toBe(false);
+    });
+  });
+
+  // A uischema `rule` with an ENABLE effect makes JsonForms pass
+  // `enabled: true` to the control. `config.readonly` (the form-wide
+  // readonly mode) must win over that local rule.
+  describe('readonly mode vs a local enable rule', () => {
+    it('should not be editable when readonly is true and a rule enabled the control', () => {
+      expect(useIsControlEditable({ enabled: true, config: { readonly: true }, uischema: {} })).toBe(false);
+    });
+
+    it('should be editable when readonly is false and a rule enabled the control', () => {
+      expect(useIsControlEditable({ enabled: true, config: { readonly: false }, uischema: {} })).toBe(true);
+    });
+
+    it('should be editable when readonly is absent and a rule enabled the control', () => {
+      expect(useIsControlEditable({ enabled: true, config: {}, uischema: {} })).toBe(true);
+    });
+
+    it('should not be editable when readonly is true and no rule enabled the control', () => {
+      expect(useIsControlEditable({ enabled: false, config: { readonly: true }, uischema: {} })).toBe(false);
+    });
+
+    it('should not be editable when readonly is false and a rule disabled the control', () => {
+      expect(useIsControlEditable({ enabled: false, config: { readonly: false }, uischema: {} })).toBe(false);
+    });
+  });
+
+  it('should be editable when everything is explicitly permissive', () => {
+    expect(
+      useIsControlEditable({
+        enabled: true,
+        config: { readonly: false },
+        uischema: { disabled: false },
+      }),
+    ).toBe(true);
+  });
+});
diff --git a/packages/sdk/src/features/json-form/hooks/use-is-control-editable.ts b/packages/sdk/src/features/json-form/hooks/use-is-control-editable.ts
index 0b55d06d3..aecdd165c 100644
--- a/packages/sdk/src/features/json-form/hooks/use-is-control-editable.ts
+++ b/packages/sdk/src/features/json-form/hooks/use-is-control-editable.ts
@@ -13,13 +13,13 @@ type Params = {
  * The control is considered non-editable when:
  * - `enabled` is explicitly set to `false`.
  * - `config.readonly` is explicitly set to `true`.
- * - `uischema.disabled` is explicitly set to `false`.
+ * - `uischema.disabled` is explicitly set to `true`.
  *
  * @param controlProps - Configuration and UI schema state of the control.
  * @returns `true` when the control is editable; otherwise, `false`.
  */
 export function useIsControlEditable(controlProps: Params): boolean {
-  // Default value usually matching JSONForm readonly
+  // Default value usually matching JSONForm readonly (can be modified by "rule")
   if (controlProps.enabled === false) {
     return false;
   }
@@ -30,7 +30,7 @@ export function useIsControlEditable(controlProps: Params): boolean {
   }
 
   // Optional flag on control
-  if (controlProps.uischema.disabled === false) {
+  if (controlProps.uischema.disabled === true) {
     return false;
   }
 
diff --git a/packages/sdk/src/types/controls.ts b/packages/sdk/src/types/controls.ts
index f860a84db..9a13b195c 100644
--- a/packages/sdk/src/types/controls.ts
+++ b/packages/sdk/src/types/controls.ts
@@ -100,37 +100,15 @@ export type DatePickerControlElement = Override<
 export type DatePickerControlProps = ControlProps<Date, DatePickerControlElement>;
 
 /**
-
  * Configuration options available to all UI schema elements.
-
  *
-
  * @see https://jsonforms.io/docs/integrations/react#config
-
  */
-
 export type BaseControlConfig = {
-  /**
-   * Whether to hide the asterisk displayed in labels for required inputs.
-   */
-  hideRequiredAsterisk?: boolean;
   /**
    * Whether all renderers should render the control in a disabled state.
    */
   readonly?: boolean;
-  /**
-   * Whether to restrict the number of characters to the `maxLength`
-   * specified in the JSON Schema.
-   */
-  restrict?: boolean;
-  /**
-   * Whether to show input descriptions even when the input is not focused.
-   */
-  showUnfocusedDescription?: boolean;
-  /**
-   * Whether the control should take the full available width.
-   */
-  trim?: boolean;
 };
 
 export type BaseControlProps = Override<

From 9a6fc99477bfe5da0ccc366c3347e37da83f4a41 Mon Sep 17 00:00:00 2001
From: Szymon Tondowski <szymon.tondowski@synergycodes.com>
Date: Wed, 26 Aug 2026 10:41:30 +0200
Subject: [PATCH 3/3] docs(sdk): changeset added

---
 .changeset/sdk-readonly-not-overridden-by-rule.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/sdk-readonly-not-overridden-by-rule.md

diff --git a/.changeset/sdk-readonly-not-overridden-by-rule.md b/.changeset/sdk-readonly-not-overridden-by-rule.md
new file mode 100644
index 000000000..b8efc88ec
--- /dev/null
+++ b/.changeset/sdk-readonly-not-overridden-by-rule.md
@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/sdk': minor
+---
+
+Form-wide readonly mode is no longer overridden by a local uischema `rule`. Every JSON Form control now stays non-editable while `config.readonly` is `true`, even when a rule with an `ENABLE` effect applies to it.