diff --git a/code/ui/blocks/src/components/ArgsTable/types.ts b/code/ui/blocks/src/components/ArgsTable/types.ts
index a8f3dd1d453e..653bf236acdb 100644
--- a/code/ui/blocks/src/components/ArgsTable/types.ts
+++ b/code/ui/blocks/src/components/ArgsTable/types.ts
@@ -41,6 +41,21 @@ export interface ArgType {
   description?: string;
   defaultValue?: any;
   if?: Conditional;
+  table?: {
+    category?: string;
+    disable?: boolean;
+    subcategory?: string;
+    defaultValue?: {
+      summary: string;
+      detail?: string;
+    };
+    type?: {
+      summary: string;
+      detail?: string;
+    };
+    readonly?: boolean;
+    [key: string]: any;
+  };
   [key: string]: any;
 }
 
diff --git a/code/ui/blocks/src/controls/Boolean.stories.tsx b/code/ui/blocks/src/controls/Boolean.stories.tsx
index 8f7c043701c6..4629f2cc3644 100644
--- a/code/ui/blocks/src/controls/Boolean.stories.tsx
+++ b/code/ui/blocks/src/controls/Boolean.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { within, fireEvent, waitFor, expect } from '@storybook/test';
+import { within, fireEvent, waitFor, expect, fn } from '@storybook/test';
 import { addons } from '@storybook/preview-api';
 import { RESET_STORY_ARGS, STORY_ARGS_UPDATED } from '@storybook/core-events';
 import { BooleanControl } from './Boolean';
@@ -14,31 +14,36 @@ const meta = {
     info: 'This is info for the Boolean control stories',
     jsx: { useBooleanShorthandSyntax: false },
   },
-} as Meta<typeof BooleanControl>;
+  args: {
+    onChange: fn(),
+  },
+} satisfies Meta<typeof BooleanControl>;
 
 export default meta;
 
-export const True: StoryObj<typeof BooleanControl> = {
+type Story = StoryObj<typeof meta>;
+
+export const True: Story = {
   args: {
     value: true,
     name: 'True',
   },
 };
-export const False: StoryObj<typeof BooleanControl> = {
+export const False: Story = {
   args: {
     value: false,
     name: 'False',
   },
 };
 
-export const Undefined: StoryObj<typeof BooleanControl> = {
+export const Undefined: Story = {
   args: {
     value: undefined,
     name: 'Undefined',
   },
 };
 
-export const Toggling: StoryObj<typeof BooleanControl> = {
+export const Toggling: Story = {
   args: {
     value: undefined,
     name: 'Toggling',
@@ -78,7 +83,7 @@ export const Toggling: StoryObj<typeof BooleanControl> = {
   },
 };
 
-export const TogglingInDocs: StoryObj<typeof BooleanControl> = {
+export const TogglingInDocs: Story = {
   ...Toggling,
   args: {
     name: 'Toggling In Docs',
@@ -89,3 +94,19 @@ export const TogglingInDocs: StoryObj<typeof BooleanControl> = {
     },
   },
 };
+
+export const Readonly: Story = {
+  args: {
+    name: 'readonly',
+    value: true,
+    argType: { table: { readonly: true } },
+  },
+};
+
+export const ReadonlyAndUndefined: Story = {
+  args: {
+    name: 'readonly-and-undefined',
+    value: undefined,
+    argType: { table: { readonly: true } },
+  },
+};
diff --git a/code/ui/blocks/src/controls/Boolean.tsx b/code/ui/blocks/src/controls/Boolean.tsx
index 7045d214b3c3..267f44cd5107 100644
--- a/code/ui/blocks/src/controls/Boolean.tsx
+++ b/code/ui/blocks/src/controls/Boolean.tsx
@@ -19,6 +19,13 @@ const Label = styled.label(({ theme }) => ({
   background: theme.boolean.background,
   borderRadius: '3em',
   padding: 1,
+  '&[aria-disabled="true"]': {
+    opacity: 0.5,
+
+    input: {
+      cursor: 'not-allowed',
+    },
+  },
 
   input: {
     appearance: 'none',
@@ -98,8 +105,16 @@ export type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
  * <BooleanControl name="isTrue" value={value} onChange={handleValueChange}/>
  * ```
  */
-export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange, onBlur, onFocus }) => {
+export const BooleanControl: FC<BooleanProps> = ({
+  name,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  argType,
+}) => {
   const onSetFalse = useCallback(() => onChange(false), [onChange]);
+  const readonly = !!argType?.table?.readonly;
   if (value === undefined) {
     return (
       <Button
@@ -107,6 +122,7 @@ export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange, onBlur
         size="medium"
         id={getControlSetterButtonId(name)}
         onClick={onSetFalse}
+        disabled={readonly}
       >
         Set boolean
       </Button>
@@ -117,13 +133,14 @@ export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange, onBlur
   const parsedValue = typeof value === 'string' ? parse(value) : value;
 
   return (
-    <Label htmlFor={controlId} aria-label={name}>
+    <Label aria-disabled={readonly} htmlFor={controlId} aria-label={name}>
       <input
         id={controlId}
         type="checkbox"
         onChange={(e) => onChange(e.target.checked)}
         checked={parsedValue}
         role="switch"
+        disabled={readonly}
         {...{ name, onBlur, onFocus }}
       />
       <span aria-hidden="true">False</span>
diff --git a/code/ui/blocks/src/controls/Color.stories.tsx b/code/ui/blocks/src/controls/Color.stories.tsx
index 68e0d0d9856e..aebd2854b2b6 100644
--- a/code/ui/blocks/src/controls/Color.stories.tsx
+++ b/code/ui/blocks/src/controls/Color.stories.tsx
@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { ColorControl } from './Color';
 
-export default {
+const meta = {
   component: ColorControl,
   parameters: { withRawArg: 'value', controls: { include: ['value', 'startOpen'] } },
   tags: ['autodocs'],
@@ -12,22 +13,26 @@ export default {
       },
     },
   },
-  args: { name: 'color' },
-} as Meta<typeof ColorControl>;
+  args: { name: 'color', onChange: fn() },
+} satisfies Meta<typeof ColorControl>;
 
-export const Basic: StoryObj<typeof ColorControl> = {
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
   args: {
     value: '#ff00ff',
   },
 };
 
-export const Undefined: StoryObj<typeof ColorControl> = {
+export const Undefined: Story = {
   args: {
     value: undefined,
   },
 };
 
-export const WithPresetColors: StoryObj<typeof ColorControl> = {
+export const WithPresetColors: Story = {
   args: {
     value: '#00ffff',
     presetColors: [
@@ -58,8 +63,15 @@ export const WithPresetColors: StoryObj<typeof ColorControl> = {
   },
 };
 
-export const StartOpen: StoryObj<typeof ColorControl> = {
+export const StartOpen: Story = {
   args: {
     startOpen: true,
   },
 };
+
+export const Readonly: Story = {
+  args: {
+    value: '#ff00ff',
+    argType: { table: { readonly: true } },
+  },
+};
diff --git a/code/ui/blocks/src/controls/Color.tsx b/code/ui/blocks/src/controls/Color.tsx
index ff2eae90a49b..b0ab993f3cff 100644
--- a/code/ui/blocks/src/controls/Color.tsx
+++ b/code/ui/blocks/src/controls/Color.tsx
@@ -13,6 +13,9 @@ import { MarkupIcon } from '@storybook/icons';
 const Wrapper = styled.div({
   position: 'relative',
   maxWidth: 250,
+  '&[aria-readonly="true"]': {
+    opacity: 0.5,
+  },
 });
 
 const PickerTooltip = styled(WithTooltip)({
@@ -20,6 +23,9 @@ const PickerTooltip = styled(WithTooltip)({
   zIndex: 1,
   top: 4,
   left: 4,
+  '[aria-readonly=true] &': {
+    cursor: 'not-allowed',
+  },
 });
 
 const TooltipContent = styled.div({
@@ -50,7 +56,7 @@ const Swatches = styled.div({
   width: 200,
 });
 
-const SwatchColor = styled.div<{ active: boolean }>(({ theme, active }) => ({
+const SwatchColor = styled.div<{ active?: boolean }>(({ theme, active }) => ({
   width: 16,
   height: 16,
   boxShadow: active
@@ -61,13 +67,13 @@ const SwatchColor = styled.div<{ active: boolean }>(({ theme, active }) => ({
 
 const swatchBackground = `url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`;
 
-type SwatchProps = { value: string; active?: boolean; onClick?: () => void; style?: object };
-const Swatch = ({ value, active, onClick, style, ...props }: SwatchProps) => {
+type SwatchProps = { value: string } & React.ComponentProps<typeof SwatchColor>;
+const Swatch = ({ value, style, ...props }: SwatchProps) => {
   const backgroundImage = `linear-gradient(${value}, ${value}), ${swatchBackground}, linear-gradient(#fff, #fff)`;
-  return <SwatchColor {...props} {...{ active, onClick }} style={{ ...style, backgroundImage }} />;
+  return <SwatchColor {...props} style={{ ...style, backgroundImage }} />;
 };
 
-const Input = styled(Form.Input)(({ theme }) => ({
+const Input = styled(Form.Input)(({ theme, readOnly }) => ({
   width: '100%',
   paddingLeft: 30,
   paddingRight: 30,
@@ -309,6 +315,7 @@ export const ColorControl: FC<ColorControlProps> = ({
   onBlur,
   presetColors,
   startOpen = false,
+  argType,
 }) => {
   const throttledOnChange = useCallback(throttle(onChange, 200), [onChange]);
   const { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput(
@@ -318,10 +325,13 @@ export const ColorControl: FC<ColorControlProps> = ({
   const { presets, addPreset } = usePresets(presetColors, color, colorSpace);
   const Picker = ColorPicker[colorSpace];
 
+  const readonly = !!argType?.table?.readonly;
+
   return (
-    <Wrapper>
+    <Wrapper aria-readonly={readonly}>
       <PickerTooltip
         startOpen={startOpen}
+        trigger={readonly ? [null] : undefined}
         closeOnOutsideClick
         onVisibleChange={() => addPreset(color)}
         tooltip={
@@ -357,6 +367,7 @@ export const ColorControl: FC<ColorControlProps> = ({
         value={value}
         onChange={(e: ChangeEvent<HTMLInputElement>) => updateValue(e.target.value)}
         onFocus={(e: FocusEvent<HTMLInputElement>) => e.target.select()}
+        readOnly={readonly}
         placeholder="Choose color..."
       />
       {value ? <ToggleIcon onClick={cycleColorSpace} /> : null}
diff --git a/code/ui/blocks/src/controls/Date.stories.tsx b/code/ui/blocks/src/controls/Date.stories.tsx
index 2a654b35b4ed..6970b952ca9d 100644
--- a/code/ui/blocks/src/controls/Date.stories.tsx
+++ b/code/ui/blocks/src/controls/Date.stories.tsx
@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { DateControl } from './Date';
 
-export default {
+const meta = {
   component: DateControl,
   tags: ['autodocs'],
   parameters: { withRawArg: 'value', controls: { include: ['value'] } },
@@ -11,12 +12,24 @@ export default {
       control: { type: 'date' },
     },
   },
-  args: { name: 'date' },
-} as Meta<typeof DateControl>;
+  args: { name: 'date', onChange: fn() },
+} satisfies Meta<typeof DateControl>;
 
-export const Basic: StoryObj<typeof DateControl> = {
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
   args: { value: new Date('2020-10-20T09:30:02') },
 };
-export const Undefined: StoryObj<typeof DateControl> = {
+
+export const Undefined: Story = {
   args: { value: undefined },
 };
+
+export const Readonly: Story = {
+  args: {
+    value: new Date('2020-10-20T09:30:02'),
+    argType: { table: { readonly: true } },
+  },
+};
diff --git a/code/ui/blocks/src/controls/Date.tsx b/code/ui/blocks/src/controls/Date.tsx
index 0baf920593db..53eedf56c50c 100644
--- a/code/ui/blocks/src/controls/Date.tsx
+++ b/code/ui/blocks/src/controls/Date.tsx
@@ -36,6 +36,10 @@ export const formatTime = (value: Date | number) => {
   return `${hours}:${minutes}`;
 };
 
+const FormInput = styled(Form.Input)(({ readOnly }) => ({
+  opacity: readOnly ? 0.5 : 1,
+}));
+
 const FlexSpaced = styled.div(({ theme }) => ({
   flex: 1,
   display: 'flex',
@@ -61,10 +65,12 @@ const FlexSpaced = styled.div(({ theme }) => ({
 }));
 
 export type DateProps = ControlProps<DateValue> & DateConfig;
-export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onBlur }) => {
+export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onBlur, argType }) => {
   const [valid, setValid] = useState(true);
   const dateRef = useRef<HTMLInputElement>();
   const timeRef = useRef<HTMLInputElement>();
+  const readonly = !!argType?.table?.readonly;
+
   useEffect(() => {
     if (valid !== false) {
       if (dateRef && dateRef.current) {
@@ -99,21 +105,23 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onB
 
   return (
     <FlexSpaced>
-      <Form.Input
+      <FormInput
         type="date"
         max="9999-12-31" // I do this because of a rendering bug in chrome
         ref={dateRef as RefObject<HTMLInputElement>}
         id={`${controlId}-date`}
         name={`${controlId}-date`}
+        readOnly={readonly}
         onChange={onDateChange}
         {...{ onFocus, onBlur }}
       />
-      <Form.Input
+      <FormInput
         type="time"
         id={`${controlId}-time`}
         name={`${controlId}-time`}
         ref={timeRef as RefObject<HTMLInputElement>}
         onChange={onTimeChange}
+        readOnly={readonly}
         {...{ onFocus, onBlur }}
       />
       {!valid ? <div>invalid</div> : null}
diff --git a/code/ui/blocks/src/controls/Files.stories.tsx b/code/ui/blocks/src/controls/Files.stories.tsx
index 4efab1d6250e..2c57c86c245a 100644
--- a/code/ui/blocks/src/controls/Files.stories.tsx
+++ b/code/ui/blocks/src/controls/Files.stories.tsx
@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { FilesControl } from './Files';
 
-export default {
+const meta = {
   component: FilesControl,
   tags: ['autodocs'],
   parameters: { withRawArg: 'value', controls: { include: ['value', 'accept'] } },
@@ -11,19 +12,33 @@ export default {
       control: { type: 'file' },
     },
   },
-  args: { name: 'files' },
-} as Meta<typeof FilesControl>;
+  args: {
+    name: 'files',
+    onChange: fn(),
+  },
+} satisfies Meta<typeof FilesControl>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Undefined: StoryObj<typeof FilesControl> = {
+export const Undefined: Story = {
   args: { value: undefined },
 };
 // for security reasons a file input field cannot have an initial value, so it doesn't make sense to have stories for it
 
-export const AcceptAnything: StoryObj<typeof FilesControl> = {
+export const AcceptAnything: Story = {
   args: { accept: '*/*' },
 };
 
-export const AcceptPDFs: StoryObj<typeof FilesControl> = {
+export const AcceptPDFs: Story = {
   name: 'Accept PDFs',
   args: { accept: '.pdf' },
 };
+
+export const Disabled: Story = {
+  args: {
+    accept: '*/*',
+    argType: { control: { readOnly: true } },
+  },
+};
diff --git a/code/ui/blocks/src/controls/Files.tsx b/code/ui/blocks/src/controls/Files.tsx
index 7daee0082c4e..2531a34022c3 100644
--- a/code/ui/blocks/src/controls/Files.tsx
+++ b/code/ui/blocks/src/controls/Files.tsx
@@ -38,8 +38,10 @@ export const FilesControl: FC<FilesControlProps> = ({
   name,
   accept = 'image/*',
   value,
+  argType,
 }) => {
   const inputElement = useRef<HTMLInputElement>(null);
+  const readonly = argType?.control?.readOnly;
 
   function handleFileChange(e: ChangeEvent<HTMLInputElement>) {
     if (!e.target.files) {
@@ -64,6 +66,7 @@ export const FilesControl: FC<FilesControlProps> = ({
       type="file"
       name={name}
       multiple
+      disabled={readonly}
       onChange={handleFileChange}
       accept={accept}
       size="flex"
diff --git a/code/ui/blocks/src/controls/Number.stories.tsx b/code/ui/blocks/src/controls/Number.stories.tsx
index e287dde96db2..a82f3079b4ed 100644
--- a/code/ui/blocks/src/controls/Number.stories.tsx
+++ b/code/ui/blocks/src/controls/Number.stories.tsx
@@ -1,41 +1,63 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { NumberControl } from './Number';
 
-export default {
+const meta = {
   component: NumberControl,
   tags: ['autodocs'],
   parameters: { withRawArg: 'value', controls: { include: ['value', 'min', 'max', 'step'] } },
-  args: { name: 'number' },
-} as Meta<typeof NumberControl>;
+  args: {
+    name: 'number',
+    onChange: fn(),
+  },
+} satisfies Meta<typeof NumberControl>;
 
-export const Undefined: StoryObj<typeof NumberControl> = {
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Undefined: Story = {
   args: { value: undefined },
 };
 // for security reasons a file input field cannot have an initial value, so it doesn't make sense to have stories for it
 
-export const Ten: StoryObj<typeof NumberControl> = {
+export const Ten: Story = {
   args: { value: 10 },
 };
-export const Zero: StoryObj<typeof NumberControl> = {
+export const Zero: Story = {
   args: { value: 0 },
 };
 
-export const WithMin: StoryObj<typeof NumberControl> = {
+export const WithMin: Story = {
   args: { min: 1, value: 3 },
 };
-export const WithMax: StoryObj<typeof NumberControl> = {
+export const WithMax: Story = {
   args: { max: 7, value: 3 },
 };
-export const WithMinAndMax: StoryObj<typeof NumberControl> = {
+export const WithMinAndMax: Story = {
   args: { min: -2, max: 5, value: 3 },
 };
-export const LessThanMin: StoryObj<typeof NumberControl> = {
+export const LessThanMin: Story = {
   args: { min: 3, value: 1 },
 };
-export const MoreThanMax: StoryObj<typeof NumberControl> = {
+export const MoreThanMax: Story = {
   args: { max: 3, value: 6 },
 };
 
-export const WithStep: StoryObj<typeof NumberControl> = {
+export const WithStep: Story = {
   args: { step: 5, value: 3 },
 };
+
+export const Readonly: Story = {
+  args: {
+    value: 3,
+    argType: { table: { readonly: true } },
+  },
+};
+
+export const ReadonlyAndUndefined: Story = {
+  args: {
+    value: undefined,
+    argType: { table: { readonly: true } },
+  },
+};
diff --git a/code/ui/blocks/src/controls/Number.tsx b/code/ui/blocks/src/controls/Number.tsx
index 2362f2fa48e3..8705ccc095f6 100644
--- a/code/ui/blocks/src/controls/Number.tsx
+++ b/code/ui/blocks/src/controls/Number.tsx
@@ -19,6 +19,10 @@ export const parse = (value: string) => {
 
 export const format = (value: NumberValue) => (value != null ? String(value) : '');
 
+const FormInput = styled(Form.Input)(({ readOnly }) => ({
+  opacity: readOnly ? 0.5 : 1,
+}));
+
 export const NumberControl: FC<NumberProps> = ({
   name,
   value,
@@ -28,10 +32,12 @@ export const NumberControl: FC<NumberProps> = ({
   step,
   onBlur,
   onFocus,
+  argType,
 }) => {
   const [inputValue, setInputValue] = useState(typeof value === 'number' ? value : '');
   const [forceVisible, setForceVisible] = useState(false);
   const [parseError, setParseError] = useState<Error>(null);
+  const readonly = !!argType?.table?.readonly;
 
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -73,6 +79,7 @@ export const NumberControl: FC<NumberProps> = ({
         size="medium"
         id={getControlSetterButtonId(name)}
         onClick={onForceVisible}
+        disabled={readonly}
       >
         Set number
       </Button>
@@ -81,7 +88,7 @@ export const NumberControl: FC<NumberProps> = ({
 
   return (
     <Wrapper>
-      <Form.Input
+      <FormInput
         ref={htmlElRef}
         id={getControlId(name)}
         type="number"
@@ -91,6 +98,7 @@ export const NumberControl: FC<NumberProps> = ({
         value={inputValue}
         valid={parseError ? 'error' : null}
         autoFocus={forceVisible}
+        readOnly={readonly}
         {...{ name, min, max, step, onFocus, onBlur }}
       />
     </Wrapper>
diff --git a/code/ui/blocks/src/controls/Object.stories.tsx b/code/ui/blocks/src/controls/Object.stories.tsx
index 22aed6df6629..2c54fc366a1f 100644
--- a/code/ui/blocks/src/controls/Object.stories.tsx
+++ b/code/ui/blocks/src/controls/Object.stories.tsx
@@ -2,14 +2,21 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ObjectControl } from './Object';
 import { fn } from '@storybook/test';
 
-export default {
+const meta = {
   component: ObjectControl,
   tags: ['autodocs'],
   parameters: { withRawArg: 'value', controls: { include: ['value'] } },
-  args: { name: 'object' },
-} as Meta<typeof ObjectControl>;
+  args: {
+    name: 'object',
+    onChange: fn(),
+  },
+} satisfies Meta<typeof ObjectControl>;
+
+export default meta;
 
-export const Object: StoryObj<typeof ObjectControl> = {
+type Story = StoryObj<typeof meta>;
+
+export const Object: Story = {
   args: {
     value: {
       name: 'Michael',
@@ -19,7 +26,7 @@ export const Object: StoryObj<typeof ObjectControl> = {
   },
 };
 
-export const Array: StoryObj<typeof ObjectControl> = {
+export const Array: Story = {
   args: {
     value: [
       'someString',
@@ -31,25 +38,25 @@ export const Array: StoryObj<typeof ObjectControl> = {
   },
 };
 
-export const EmptyObject: StoryObj<typeof ObjectControl> = {
+export const EmptyObject: Story = {
   args: {
     value: {},
   },
 };
 
-export const EmptyArray: StoryObj<typeof ObjectControl> = {
+export const EmptyArray: Story = {
   args: {
     value: {},
   },
 };
 
-export const Null: StoryObj<typeof ObjectControl> = {
+export const Null: Story = {
   args: {
     value: null,
   },
 };
 
-export const Undefined: StoryObj<typeof ObjectControl> = {
+export const Undefined: Story = {
   args: {
     value: undefined,
   },
@@ -70,7 +77,7 @@ class Person {
  * We show a class collapsed as it might contain many methods.
  * It is read-only as we can not construct the class.
  */
-export const Class: StoryObj<typeof ObjectControl> = {
+export const Class: Story = {
   args: {
     value: new Person('Kasper', 'Peulen'),
   },
@@ -80,8 +87,26 @@ export const Class: StoryObj<typeof ObjectControl> = {
  * We show a function collapsed. Even if it is "object" like, such as "fn".
  * It is read-only as we can not construct a function.
  */
-export const Function: StoryObj<typeof ObjectControl> = {
+export const Function: Story = {
   args: {
     value: fn(),
   },
 };
+
+export const Readonly: Story = {
+  args: {
+    value: {
+      name: 'Michael',
+      someDate: new Date('2022-10-30T12:31:11'),
+      nested: { someBool: true, someNumber: 22 },
+    },
+    argType: { table: { readonly: true } },
+  },
+};
+
+export const ReadonlyAndUndefined: Story = {
+  args: {
+    value: undefined,
+    argType: { table: { readonly: true } },
+  },
+};
diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx
index 28188f77165f..fe28f6b136f9 100644
--- a/code/ui/blocks/src/controls/Object.tsx
+++ b/code/ui/blocks/src/controls/Object.tsx
@@ -17,6 +17,10 @@ const Wrapper = styled.div(({ theme }) => ({
   position: 'relative',
   display: 'flex',
 
+  '&[aria-readonly="true"]': {
+    opacity: 0.5,
+  },
+
   '.rejt-tree': {
     marginLeft: '1rem',
     fontSize: '13px',
@@ -221,10 +225,7 @@ const selectValue = (event: SyntheticEvent<HTMLInputElement>) => {
   event.currentTarget.select();
 };
 
-export type ObjectProps = ControlProps<ObjectValue> &
-  ObjectConfig & {
-    theme: any; // TODO: is there a type for this?
-  };
+export type ObjectProps = ControlProps<ObjectValue> & ObjectConfig;
 
 const getCustomStyleFunction: (theme: Theme) => JsonTreeProps['getStyle'] = (theme) => () => ({
   name: {
@@ -243,12 +244,13 @@ const getCustomStyleFunction: (theme: Theme) => JsonTreeProps['getStyle'] = (the
   },
 });
 
-export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
+export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType }) => {
   const theme = useTheme();
   const data = useMemo(() => value && cloneDeep(value), [value]);
   const hasData = data !== null && data !== undefined;
   const [showRaw, setShowRaw] = useState(!hasData);
   const [parseError, setParseError] = useState<Error>(null);
+  const readonly = !!argType?.table?.readonly;
   const updateRaw: (raw: string) => void = useCallback(
     (raw) => {
       try {
@@ -274,7 +276,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
 
   if (!hasData) {
     return (
-      <Button id={getControlSetterButtonId(name)} onClick={onForceVisible}>
+      <Button disabled={readonly} id={getControlSetterButtonId(name)} onClick={onForceVisible}>
         Set object
       </Button>
     );
@@ -290,6 +292,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
       placeholder="Edit JSON string..."
       autoFocus={forceVisible}
       valid={parseError ? 'error' : null}
+      readOnly={readonly}
     />
   );
 
@@ -297,7 +300,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
     Array.isArray(value) || (typeof value === 'object' && value?.constructor === Object);
 
   return (
-    <Wrapper>
+    <Wrapper aria-readonly={readonly}>
       {isObjectOrArray && (
         <RawButton
           onClick={(e: SyntheticEvent) => {
@@ -311,7 +314,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
       )}
       {!showRaw ? (
         <JsonTree
-          readOnly={!isObjectOrArray}
+          readOnly={readonly || !isObjectOrArray}
           isCollapsed={isObjectOrArray ? /* default value */ undefined : () => true}
           data={data}
           rootName={name}
diff --git a/code/ui/blocks/src/controls/Range.stories.tsx b/code/ui/blocks/src/controls/Range.stories.tsx
index 893d5c1baac5..1fd8adc85624 100644
--- a/code/ui/blocks/src/controls/Range.stories.tsx
+++ b/code/ui/blocks/src/controls/Range.stories.tsx
@@ -1,43 +1,55 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { RangeControl } from './Range';
 
-export default {
+const meta = {
   component: RangeControl,
   tags: ['autodocs'],
   parameters: { withRawArg: 'value', controls: { include: ['value', 'min', 'max', 'step'] } },
-  args: { name: 'range' },
-} as Meta<typeof RangeControl>;
+  args: {
+    name: 'range',
+    onChange: fn(),
+  },
+} satisfies Meta<typeof RangeControl>;
+
+export default meta;
 
-export const Undefined: StoryObj<typeof RangeControl> = {
+type Story = StoryObj<typeof meta>;
+
+export const Undefined: Story = {
   args: {
     value: undefined,
   },
 };
 
-export const Zero: StoryObj<typeof RangeControl> = {
+export const Zero: Story = {
   args: {
     value: 0,
   },
 };
-export const WithMin: StoryObj<typeof RangeControl> = {
+
+export const WithMin: Story = {
   args: {
     min: 5,
     value: 20,
   },
 };
-export const WithMax: StoryObj<typeof RangeControl> = {
+
+export const WithMax: Story = {
   args: {
     max: 50,
     value: 20,
   },
 };
-export const WithBigMax: StoryObj<typeof RangeControl> = {
+
+export const WithBigMax: Story = {
   args: {
     max: 10000000000,
     value: 20,
   },
 };
-export const WithMinAndMax: StoryObj<typeof RangeControl> = {
+
+export const WithMinAndMax: Story = {
   args: {
     min: 10,
     max: 50,
@@ -45,37 +57,48 @@ export const WithMinAndMax: StoryObj<typeof RangeControl> = {
   },
 };
 
-export const LessThanMin: StoryObj<typeof RangeControl> = {
+export const LessThanMin: Story = {
   args: {
     min: 10,
     value: 5,
   },
 };
 
-export const MoreThanMax: StoryObj<typeof RangeControl> = {
+export const MoreThanMax: Story = {
   args: {
     max: 20,
     value: 50,
   },
 };
 
-export const WithSteps: StoryObj<typeof RangeControl> = {
+export const WithSteps: Story = {
   args: {
     step: 5,
     value: 50,
   },
 };
 
-export const Decimals: StoryObj<typeof RangeControl> = {
+export const Decimals: Story = {
   args: {
     step: 0.000000000002,
     value: 989.123123123123,
     max: 2000,
   },
 };
-export const WithInfiniteMax: StoryObj<typeof RangeControl> = {
+export const WithInfiniteMax: Story = {
   args: {
     max: Infinity,
     value: 50,
   },
 };
+
+export const Readonly: Story = {
+  args: {
+    value: 40,
+    argType: {
+      table: {
+        readonly: true,
+      },
+    },
+  },
+};
diff --git a/code/ui/blocks/src/controls/Range.tsx b/code/ui/blocks/src/controls/Range.tsx
index 26b900e9441c..568399e64953 100644
--- a/code/ui/blocks/src/controls/Range.tsx
+++ b/code/ui/blocks/src/controls/Range.tsx
@@ -12,7 +12,7 @@ import { parse } from './Number';
 type RangeProps = ControlProps<NumberValue | null> & RangeConfig;
 
 const RangeInput = styled.input<{ min: number; max: number; value: number }>(
-  ({ theme, min, max, value }) => ({
+  ({ theme, min, max, value, disabled }) => ({
     // Resytled using http://danielstern.ca/range.css/#/
     '&': {
       width: '100%',
@@ -35,7 +35,7 @@ const RangeInput = styled.input<{ min: number; max: number; value: number }>(
       borderRadius: 6,
       width: '100%',
       height: 6,
-      cursor: 'pointer',
+      cursor: disabled ? 'not-allowed' : 'pointer',
     },
 
     '&::-webkit-slider-thumb': {
@@ -46,7 +46,7 @@ const RangeInput = styled.input<{ min: number; max: number; value: number }>(
       border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
       borderRadius: '50px',
       boxShadow: `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}`,
-      cursor: 'grab',
+      cursor: disabled ? 'not-allowed' : 'grab',
       appearance: 'none',
       background: `${theme.input.background}`,
       transition: 'all 150ms ease-out',
@@ -60,7 +60,7 @@ const RangeInput = styled.input<{ min: number; max: number; value: number }>(
       '&:active': {
         background: `${theme.input.background}`,
         transform: 'scale3d(1, 1, 1) translateY(0px)',
-        cursor: 'grabbing',
+        cursor: disabled ? 'not-allowed' : 'grab',
       },
     },
 
@@ -92,7 +92,7 @@ const RangeInput = styled.input<{ min: number; max: number; value: number }>(
       borderRadius: 6,
       width: '100%',
       height: 6,
-      cursor: 'pointer',
+      cursor: disabled ? 'not-allowed' : 'pointer',
       outline: 'none',
     },
 
@@ -102,7 +102,7 @@ const RangeInput = styled.input<{ min: number; max: number; value: number }>(
       border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
       borderRadius: '50px',
       boxShadow: `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}`,
-      cursor: 'grab',
+      cursor: disabled ? 'not-allowed' : 'grap',
       background: `${theme.input.background}`,
       transition: 'all 150ms ease-out',
 
@@ -161,6 +161,9 @@ const RangeLabel = styled.span({
   whiteSpace: 'nowrap',
   fontFeatureSettings: 'tnum',
   fontVariantNumeric: 'tabular-nums',
+  '[aria-readonly=true] &': {
+    opacity: 0.5,
+  },
 });
 
 const RangeCurrentAndMaxLabel = styled(RangeLabel)<{
@@ -202,6 +205,7 @@ export const RangeControl: FC<RangeProps> = ({
   step = 1,
   onBlur,
   onFocus,
+  argType,
 }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange(parse(event.target.value));
@@ -210,12 +214,15 @@ export const RangeControl: FC<RangeProps> = ({
   const hasValue = value !== undefined;
   const numberOFDecimalsPlaces = useMemo(() => getNumberOfDecimalPlaces(step), [step]);
 
+  const readonly = !!argType?.table?.readonly;
+
   return (
-    <RangeWrapper>
+    <RangeWrapper aria-readonly={readonly}>
       <RangeLabel>{min}</RangeLabel>
       <RangeInput
         id={getControlId(name)}
         type="range"
+        disabled={readonly}
         onChange={handleChange}
         {...{ name, value, min, max, step, onFocus, onBlur }}
       />
diff --git a/code/ui/blocks/src/controls/Text.stories.tsx b/code/ui/blocks/src/controls/Text.stories.tsx
index 45eb0f722505..603ca990cbe0 100644
--- a/code/ui/blocks/src/controls/Text.stories.tsx
+++ b/code/ui/blocks/src/controls/Text.stories.tsx
@@ -1,34 +1,64 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { TextControl } from './Text';
 
-export default {
+const meta = {
   component: TextControl,
   tags: ['autodocs'],
   parameters: { withRawArg: 'value', controls: { include: ['value', 'maxLength'] } },
-  args: { name: 'text' },
-} as Meta<typeof TextControl>;
+  args: {
+    name: 'text',
+    onChange: fn(),
+  },
+} satisfies Meta<typeof TextControl>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Basic: StoryObj<typeof TextControl> = {
+export const Basic: Story = {
   args: {
     value: 'Storybook says hi. 👋',
   },
 };
 
-export const Empty: StoryObj<typeof TextControl> = {
+export const Empty: Story = {
   args: {
     value: '',
   },
 };
 
-export const Undefined: StoryObj<typeof TextControl> = {
+export const Undefined: Story = {
   args: {
     value: undefined,
   },
 };
 
-export const WithMaxLength: StoryObj<typeof TextControl> = {
+export const WithMaxLength: Story = {
   args: {
     value: "You can't finish this sente",
     maxLength: 28,
   },
 };
+
+export const BasicReadonly: Story = {
+  args: {
+    value: 'Storybook says hi. 👋',
+    argType: {
+      table: {
+        readonly: true,
+      },
+    },
+  },
+};
+
+export const UndefinedReadonly: Story = {
+  args: {
+    value: undefined,
+    argType: {
+      table: {
+        readonly: true,
+      },
+    },
+  },
+};
diff --git a/code/ui/blocks/src/controls/Text.tsx b/code/ui/blocks/src/controls/Text.tsx
index 38cb955816e4..62318037bb6d 100644
--- a/code/ui/blocks/src/controls/Text.tsx
+++ b/code/ui/blocks/src/controls/Text.tsx
@@ -25,21 +25,27 @@ export const TextControl: FC<TextProps> = ({
   onFocus,
   onBlur,
   maxLength,
+  argType,
 }) => {
   const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     onChange(event.target.value);
   };
 
+  const readonly = !!argType?.table?.readonly;
+
   const [forceVisible, setForceVisible] = useState(false);
+
   const onForceVisible = useCallback(() => {
     onChange('');
     setForceVisible(true);
   }, [setForceVisible]);
+
   if (value === undefined) {
     return (
       <Button
         variant="outline"
         size="medium"
+        disabled={readonly}
         id={getControlSetterButtonId(name)}
         onClick={onForceVisible}
       >
@@ -49,12 +55,14 @@ export const TextControl: FC<TextProps> = ({
   }
 
   const isValid = typeof value === 'string';
+
   return (
     <Wrapper>
       <Form.Textarea
         id={getControlId(name)}
         maxLength={maxLength}
         onChange={handleChange}
+        disabled={readonly}
         size="flex"
         placeholder="Edit string..."
         autoFocus={forceVisible}
diff --git a/code/ui/blocks/src/controls/options/CheckOptions.stories.tsx b/code/ui/blocks/src/controls/options/CheckOptions.stories.tsx
index 535ff578abb4..88a21760fd93 100644
--- a/code/ui/blocks/src/controls/options/CheckOptions.stories.tsx
+++ b/code/ui/blocks/src/controls/options/CheckOptions.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { OptionsControl } from './Options';
 
 const arrayOptions = ['Bat', 'Cat', 'Rat'];
@@ -25,6 +26,7 @@ const meta = {
     name: 'check',
     type: 'check',
     argType: { options: arrayOptions },
+    onChange: fn(),
   },
   argTypes: {
     value: {
@@ -32,31 +34,33 @@ const meta = {
       options: arrayOptions,
     },
   },
-} as Meta<typeof OptionsControl>;
+} satisfies Meta<typeof OptionsControl>;
 
 export default meta;
 
-export const Array: StoryObj<typeof OptionsControl> = {
+type Story = StoryObj<typeof meta>;
+
+export const Array: Story = {
   args: {
     value: [arrayOptions[0]],
   },
 };
 
-export const ArrayInline: StoryObj<typeof OptionsControl> = {
+export const ArrayInline: Story = {
   args: {
     type: 'inline-check',
     value: [arrayOptions[1], arrayOptions[2]],
   },
 };
 
-export const ArrayLabels: StoryObj<typeof OptionsControl> = {
+export const ArrayLabels: Story = {
   args: {
     value: [arrayOptions[0]],
     labels,
   },
 };
 
-export const ArrayInlineLabels: StoryObj<typeof OptionsControl> = {
+export const ArrayInlineLabels: Story = {
   args: {
     type: 'inline-check',
     value: [arrayOptions[1], arrayOptions[2]],
@@ -64,13 +68,13 @@ export const ArrayInlineLabels: StoryObj<typeof OptionsControl> = {
   },
 };
 
-export const ArrayUndefined: StoryObj<typeof OptionsControl> = {
+export const ArrayUndefined: Story = {
   args: {
     value: undefined,
   },
 };
 
-export const Object: StoryObj<typeof OptionsControl> = {
+export const Object: Story = {
   name: 'DEPRECATED: Object',
   args: {
     value: [objectOptions.B],
@@ -79,7 +83,7 @@ export const Object: StoryObj<typeof OptionsControl> = {
   argTypes: { value: { control: { type: 'object' } } },
 };
 
-export const ObjectInline: StoryObj<typeof OptionsControl> = {
+export const ObjectInline: Story = {
   name: 'DEPRECATED: Object Inline',
   args: {
     type: 'inline-check',
@@ -89,7 +93,7 @@ export const ObjectInline: StoryObj<typeof OptionsControl> = {
   argTypes: { value: { control: { type: 'object' } } },
 };
 
-export const ObjectUndefined: StoryObj<typeof OptionsControl> = {
+export const ObjectUndefined: Story = {
   name: 'DEPRECATED: Object Undefined',
   args: {
     value: undefined,
@@ -97,3 +101,15 @@ export const ObjectUndefined: StoryObj<typeof OptionsControl> = {
   },
   argTypes: { value: { control: { type: 'object' } } },
 };
+
+export const ArrayReadonly: Story = {
+  args: {
+    value: [arrayOptions[0]],
+    argType: {
+      options: arrayOptions,
+      table: {
+        readonly: true,
+      },
+    },
+  },
+};
diff --git a/code/ui/blocks/src/controls/options/Checkbox.tsx b/code/ui/blocks/src/controls/options/Checkbox.tsx
index 6fe2cf00255b..6be088b111ba 100644
--- a/code/ui/blocks/src/controls/options/Checkbox.tsx
+++ b/code/ui/blocks/src/controls/options/Checkbox.tsx
@@ -8,26 +8,40 @@ import type { ControlProps, OptionsMultiSelection, NormalizedOptionsConfig } fro
 import { selectedKeys, selectedValues } from './helpers';
 import { getControlId } from '../helpers';
 
-const Wrapper = styled.div<{ isInline: boolean }>(({ isInline }) =>
-  isInline
-    ? {
-        display: 'flex',
-        flexWrap: 'wrap',
-        alignItems: 'flex-start',
+const Wrapper = styled.div<{ isInline: boolean }>(
+  ({ isInline }) =>
+    isInline
+      ? {
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'flex-start',
 
-        label: {
-          display: 'inline-flex',
-          marginRight: 15,
+          label: {
+            display: 'inline-flex',
+            marginRight: 15,
+          },
+        }
+      : {
+          label: {
+            display: 'flex',
+          },
         },
-      }
-    : {
-        label: {
-          display: 'flex',
+  (props) => {
+    if ([props['aria-readonly']]) {
+      return {
+        input: {
+          cursor: 'not-allowed',
         },
-      }
+      };
+    }
+  }
 );
 
-const Text = styled.span({});
+const Text = styled.span({
+  '[aria-readonly=true] &': {
+    opacity: 0.5,
+  },
+});
 
 const Label = styled.label({
   lineHeight: '20px',
@@ -52,6 +66,7 @@ export const CheckboxControl: FC<CheckboxProps> = ({
   value,
   onChange,
   isInline,
+  argType,
 }) => {
   if (!options) {
     logger.warn(`Checkbox with no options: ${name}`);
@@ -61,6 +76,8 @@ export const CheckboxControl: FC<CheckboxProps> = ({
   const initial = selectedKeys(value, options);
   const [selected, setSelected] = useState(initial);
 
+  const readonly = !!argType?.table?.readonly;
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const option = (e.target as HTMLInputElement).value;
     const updated = [...selected];
@@ -80,13 +97,14 @@ export const CheckboxControl: FC<CheckboxProps> = ({
   const controlId = getControlId(name);
 
   return (
-    <Wrapper isInline={isInline}>
+    <Wrapper aria-readonly={readonly} isInline={isInline}>
       {Object.keys(options).map((key, index) => {
         const id = `${controlId}-${index}`;
         return (
           <Label key={id} htmlFor={id}>
             <input
               type="checkbox"
+              disabled={readonly}
               id={id}
               name={id}
               value={key}
diff --git a/code/ui/blocks/src/controls/options/Options.tsx b/code/ui/blocks/src/controls/options/Options.tsx
index 6cb12c3c7f48..859df4f678fc 100644
--- a/code/ui/blocks/src/controls/options/Options.tsx
+++ b/code/ui/blocks/src/controls/options/Options.tsx
@@ -44,14 +44,17 @@ export const OptionsControl: FC<OptionsProps> = (props) => {
   const { type = 'select', labels, argType } = props;
   const normalized = {
     ...props,
+    argType,
     options: argType ? normalizeOptions(argType.options, labels) : {},
     isInline: type.includes('inline'),
     isMulti: type.includes('multi'),
   };
 
   const Control = Controls[type];
+
   if (Control) {
     return <Control {...normalized} />;
   }
+
   throw new Error(`Unknown options type: ${type}`);
 };
diff --git a/code/ui/blocks/src/controls/options/Radio.tsx b/code/ui/blocks/src/controls/options/Radio.tsx
index 75d7b6a09d79..d3bc514f3361 100644
--- a/code/ui/blocks/src/controls/options/Radio.tsx
+++ b/code/ui/blocks/src/controls/options/Radio.tsx
@@ -8,26 +8,40 @@ import type { ControlProps, OptionsSingleSelection, NormalizedOptionsConfig } fr
 import { selectedKey } from './helpers';
 import { getControlId } from '../helpers';
 
-const Wrapper = styled.div<{ isInline: boolean }>(({ isInline }) =>
-  isInline
-    ? {
-        display: 'flex',
-        flexWrap: 'wrap',
-        alignItems: 'flex-start',
+const Wrapper = styled.div<{ isInline: boolean }>(
+  ({ isInline }) =>
+    isInline
+      ? {
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'flex-start',
 
-        label: {
-          display: 'inline-flex',
-          marginRight: 15,
+          label: {
+            display: 'inline-flex',
+            marginRight: 15,
+          },
+        }
+      : {
+          label: {
+            display: 'flex',
+          },
         },
-      }
-    : {
-        label: {
-          display: 'flex',
+  (props) => {
+    if ([props['aria-readonly']]) {
+      return {
+        input: {
+          cursor: 'not-allowed',
         },
-      }
+      };
+    }
+  }
 );
 
-const Text = styled.span({});
+const Text = styled.span({
+  '[aria-readonly=true] &': {
+    opacity: 0.5,
+  },
+});
 
 const Label = styled.label({
   lineHeight: '20px',
@@ -46,7 +60,14 @@ const Label = styled.label({
 
 type RadioConfig = NormalizedOptionsConfig & { isInline: boolean };
 type RadioProps = ControlProps<OptionsSingleSelection> & RadioConfig;
-export const RadioControl: FC<RadioProps> = ({ name, options, value, onChange, isInline }) => {
+export const RadioControl: FC<RadioProps> = ({
+  name,
+  options,
+  value,
+  onChange,
+  isInline,
+  argType,
+}) => {
   if (!options) {
     logger.warn(`Radio with no options: ${name}`);
     return <>-</>;
@@ -54,8 +75,10 @@ export const RadioControl: FC<RadioProps> = ({ name, options, value, onChange, i
   const selection = selectedKey(value, options);
   const controlId = getControlId(name);
 
+  const readonly = !!argType?.table?.readonly;
+
   return (
-    <Wrapper isInline={isInline}>
+    <Wrapper aria-readonly={readonly} isInline={isInline}>
       {Object.keys(options).map((key, index) => {
         const id = `${controlId}-${index}`;
         return (
@@ -64,6 +87,7 @@ export const RadioControl: FC<RadioProps> = ({ name, options, value, onChange, i
               type="radio"
               id={id}
               name={id}
+              disabled={readonly}
               value={key}
               onChange={(e) => onChange(options[e.currentTarget.value])}
               checked={key === selection}
diff --git a/code/ui/blocks/src/controls/options/RadioOptions.stories.tsx b/code/ui/blocks/src/controls/options/RadioOptions.stories.tsx
index 534752835dff..26a46a16450b 100644
--- a/code/ui/blocks/src/controls/options/RadioOptions.stories.tsx
+++ b/code/ui/blocks/src/controls/options/RadioOptions.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { OptionsControl } from './Options';
 
 const arrayOptions = ['Bat', 'Cat', 'Rat'];
@@ -25,6 +26,7 @@ const meta = {
     name: 'radio',
     type: 'radio',
     argType: { options: arrayOptions },
+    onChange: fn(),
   },
   argTypes: {
     value: {
@@ -32,31 +34,33 @@ const meta = {
       options: arrayOptions,
     },
   },
-} as Meta<typeof OptionsControl>;
+} satisfies Meta<typeof OptionsControl>;
 
 export default meta;
 
-export const Array: StoryObj<typeof OptionsControl> = {
+type Story = StoryObj<typeof meta>;
+
+export const Array: Story = {
   args: {
     value: arrayOptions[0],
   },
 };
 
-export const ArrayInline: StoryObj<typeof OptionsControl> = {
+export const ArrayInline: Story = {
   args: {
     type: 'inline-radio',
     value: arrayOptions[1],
   },
 };
 
-export const ArrayLabels: StoryObj<typeof OptionsControl> = {
+export const ArrayLabels: Story = {
   args: {
     value: arrayOptions[0],
     labels,
   },
 };
 
-export const ArrayInlineLabels: StoryObj<typeof OptionsControl> = {
+export const ArrayInlineLabels: Story = {
   args: {
     type: 'inline-radio',
     value: arrayOptions[1],
@@ -64,13 +68,13 @@ export const ArrayInlineLabels: StoryObj<typeof OptionsControl> = {
   },
 };
 
-export const ArrayUndefined: StoryObj<typeof OptionsControl> = {
+export const ArrayUndefined: Story = {
   args: {
     value: undefined,
   },
 };
 
-export const Object: StoryObj<typeof OptionsControl> = {
+export const Object: Story = {
   name: 'DEPRECATED: Object',
   args: {
     value: objectOptions.B,
@@ -79,7 +83,7 @@ export const Object: StoryObj<typeof OptionsControl> = {
   argTypes: { value: { control: { type: 'object' } } },
 };
 
-export const ObjectInline: StoryObj<typeof OptionsControl> = {
+export const ObjectInline: Story = {
   name: 'DEPRECATED: Object Inline',
   args: {
     type: 'inline-radio',
@@ -89,7 +93,7 @@ export const ObjectInline: StoryObj<typeof OptionsControl> = {
   argTypes: { value: { control: { type: 'object' } } },
 };
 
-export const ObjectUndefined: StoryObj<typeof OptionsControl> = {
+export const ObjectUndefined: Story = {
   name: 'DEPRECATED: Object Undefined',
   args: {
     value: undefined,
@@ -97,3 +101,15 @@ export const ObjectUndefined: StoryObj<typeof OptionsControl> = {
   },
   argTypes: { value: { control: { type: 'object' } } },
 };
+
+export const ArrayReadonly: Story = {
+  args: {
+    value: [arrayOptions[0]],
+    argType: {
+      options: arrayOptions,
+      table: {
+        readonly: true,
+      },
+    },
+  },
+};
diff --git a/code/ui/blocks/src/controls/options/Select.tsx b/code/ui/blocks/src/controls/options/Select.tsx
index 574c604b180b..8d56864b0799 100644
--- a/code/ui/blocks/src/controls/options/Select.tsx
+++ b/code/ui/blocks/src/controls/options/Select.tsx
@@ -93,17 +93,19 @@ type SelectProps = ControlProps<OptionsSelection> & SelectConfig;
 
 const NO_SELECTION = 'Choose option...';
 
-const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
+const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange, argType }) => {
   const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
     onChange(options[e.currentTarget.value]);
   };
   const selection = selectedKey(value, options) || NO_SELECTION;
   const controlId = getControlId(name);
 
+  const readonly = !!argType?.table?.readonly;
+
   return (
     <SelectWrapper>
       <ChevronSmallDownIcon />
-      <OptionsSelect id={controlId} value={selection} onChange={handleChange}>
+      <OptionsSelect disabled={readonly} id={controlId} value={selection} onChange={handleChange}>
         <option key="no-selection" disabled>
           {NO_SELECTION}
         </option>
@@ -117,7 +119,7 @@ const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
   );
 };
 
-const MultiSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
+const MultiSelect: FC<SelectProps> = ({ name, value, options, onChange, argType }) => {
   const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
     const selection = Array.from(e.currentTarget.options)
       .filter((option) => option.selected)
@@ -127,9 +129,17 @@ const MultiSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
   const selection = selectedKeys(value, options);
   const controlId = getControlId(name);
 
+  const readonly = !!argType?.table?.readonly;
+
   return (
     <SelectWrapper>
-      <OptionsSelect id={controlId} multiple value={selection} onChange={handleChange}>
+      <OptionsSelect
+        disabled={readonly}
+        id={controlId}
+        multiple
+        value={selection}
+        onChange={handleChange}
+      >
         {Object.keys(options).map((key) => (
           <option key={key} value={key}>
             {key}
diff --git a/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx b/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx
index 653b2574d4c8..d417c24bd313 100644
--- a/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx
+++ b/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { OptionsControl } from './Options';
 
 const arrayOptions = ['Bat', 'Cat', 'Rat'];
@@ -33,6 +34,7 @@ const meta = {
     name: 'select',
     type: 'select',
     argType: { options: arrayOptions },
+    onChange: fn(),
   },
   argTypes: {
     value: {
@@ -40,17 +42,19 @@ const meta = {
       options: arrayOptions,
     },
   },
-} as Meta<typeof OptionsControl>;
+} satisfies Meta<typeof OptionsControl>;
 
 export default meta;
 
-export const Array: StoryObj<typeof OptionsControl> = {
+type Story = StoryObj<typeof meta>;
+
+export const Array: Story = {
   args: {
     value: arrayOptions[0],
   },
 };
 
-export const ArrayMulti: StoryObj<typeof OptionsControl> = {
+export const ArrayMulti: Story = {
   args: {
     type: 'multi-select',
     value: [arrayOptions[1], arrayOptions[2]],
@@ -58,13 +62,13 @@ export const ArrayMulti: StoryObj<typeof OptionsControl> = {
   ...argTypeMultiSelect,
 };
 
-export const ArrayUndefined: StoryObj<typeof OptionsControl> = {
+export const ArrayUndefined: Story = {
   args: {
     value: undefined,
   },
 };
 
-export const ArrayMultiUndefined: StoryObj<typeof OptionsControl> = {
+export const ArrayMultiUndefined: Story = {
   args: {
     type: 'multi-select',
     value: undefined,
@@ -72,14 +76,14 @@ export const ArrayMultiUndefined: StoryObj<typeof OptionsControl> = {
   ...argTypeMultiSelect,
 };
 
-export const ArrayLabels: StoryObj<typeof OptionsControl> = {
+export const ArrayLabels: Story = {
   args: {
     value: arrayOptions[0],
     labels,
   },
 };
 
-export const ArrayMultiLabels: StoryObj<typeof OptionsControl> = {
+export const ArrayMultiLabels: Story = {
   args: {
     type: 'multi-select',
     value: [arrayOptions[1], arrayOptions[2]],
@@ -88,7 +92,7 @@ export const ArrayMultiLabels: StoryObj<typeof OptionsControl> = {
   ...argTypeMultiSelect,
 };
 
-export const Object: StoryObj<typeof OptionsControl> = {
+export const Object: Story = {
   name: 'DEPRECATED: Object',
   args: {
     value: objectOptions.B,
@@ -97,7 +101,7 @@ export const Object: StoryObj<typeof OptionsControl> = {
   argTypes: { value: { control: { type: 'object' } } },
 };
 
-export const ObjectMulti: StoryObj<typeof OptionsControl> = {
+export const ObjectMulti: Story = {
   name: 'DEPRECATED: Object Multi',
   args: {
     type: 'multi-select',
@@ -107,7 +111,7 @@ export const ObjectMulti: StoryObj<typeof OptionsControl> = {
   argTypes: { value: { control: { type: 'object' } } },
 };
 
-export const ObjectUndefined: StoryObj<typeof OptionsControl> = {
+export const ObjectUndefined: Story = {
   name: 'DEPRECATED: Object Undefined',
   args: {
     value: undefined,
@@ -116,7 +120,7 @@ export const ObjectUndefined: StoryObj<typeof OptionsControl> = {
   argTypes: { value: { control: { type: 'object' } } },
 };
 
-export const ObjectMultiUndefined: StoryObj<typeof OptionsControl> = {
+export const ObjectMultiUndefined: Story = {
   name: 'DEPRECATED: Object Multi Undefined',
   args: {
     type: 'multi-select',
@@ -125,3 +129,35 @@ export const ObjectMultiUndefined: StoryObj<typeof OptionsControl> = {
   },
   argTypes: { value: { control: { type: 'object' } } },
 };
+
+export const ArrayReadonly: Story = {
+  args: {
+    value: arrayOptions[0],
+    argType: {
+      options: arrayOptions,
+      table: {
+        readonly: true,
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      control: { type: 'select' },
+      options: arrayOptions,
+    },
+  },
+};
+
+export const ArrayMultiReadonly: Story = {
+  args: {
+    type: 'multi-select',
+    value: [arrayOptions[1], arrayOptions[2]],
+    argType: {
+      options: arrayOptions,
+      table: {
+        readonly: true,
+      },
+    },
+  },
+  ...argTypeMultiSelect,
+};
diff --git a/code/ui/blocks/src/controls/types.ts b/code/ui/blocks/src/controls/types.ts
index 6303ec41422a..26460ff6184c 100644
--- a/code/ui/blocks/src/controls/types.ts
+++ b/code/ui/blocks/src/controls/types.ts
@@ -54,7 +54,7 @@ export type OptionsControlType =
   | 'multi-select';
 
 export interface OptionsConfig {
-  labels: Record<any, string>;
+  labels?: Record<any, string>;
   type: OptionsControlType;
 }
 
diff --git a/code/ui/blocks/src/examples/ButtonReadonly.stories.tsx b/code/ui/blocks/src/examples/ButtonReadonly.stories.tsx
new file mode 100644
index 000000000000..4f55b32d69f9
--- /dev/null
+++ b/code/ui/blocks/src/examples/ButtonReadonly.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta = {
+  title: 'examples/Button Readonly',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: {
+      control: 'color',
+      table: { readonly: true },
+    },
+    primary: {
+      table: { readonly: true },
+    },
+    label: {
+      table: { readonly: true },
+    },
+    size: {
+      table: { readonly: true },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
diff --git a/docs/api/arg-types.md b/docs/api/arg-types.md
index ed9f66b4cdd0..ebed747f2591 100644
--- a/docs/api/arg-types.md
+++ b/docs/api/arg-types.md
@@ -396,6 +396,12 @@ Type: `boolean`
 
 Set to `true` to remove the argType's row from the table.
 
+#### `table.readonly`
+
+Type: `boolean`
+
+Set to `true` to indicate that the argType is read-only.
+
 #### `table.subcategory`
 
 Type: `string`