diff --git a/src/components/helpers/jsonforms/layouts/VerticalLayout.test.tsx b/src/components/helpers/jsonforms/layouts/VerticalLayout.test.tsx
index c2dbdc5b..6e660f00 100644
--- a/src/components/helpers/jsonforms/layouts/VerticalLayout.test.tsx
+++ b/src/components/helpers/jsonforms/layouts/VerticalLayout.test.tsx
@@ -55,4 +55,13 @@ describe("VerticalLayout", () => {
     expect(wrappers).toHaveLength(2);
     expect(wrappers[1]).toBeEmptyDOMElement();
   });
+
+  test("greys labels of disabled inputs", () => {
+    renderForm();
+    const css = Array.from(document.querySelectorAll("style"))
+      .map((style) => style.textContent)
+      .join("");
+    expect(css).toMatch(/:has\(> \.MuiInputBase-root\.Mui-disabled\)/);
+    expect(css).toMatch(/:has\(input:disabled\)/);
+  });
 });
diff --git a/src/components/helpers/jsonforms/layouts/VerticalLayout.tsx b/src/components/helpers/jsonforms/layouts/VerticalLayout.tsx
index f065f284..96ee7874 100644
--- a/src/components/helpers/jsonforms/layouts/VerticalLayout.tsx
+++ b/src/components/helpers/jsonforms/layouts/VerticalLayout.tsx
@@ -26,8 +26,13 @@ const VerticalLayoutComponent = ({
     <Stack
       spacing={2}
       useFlexGap
-      // Hidden fields render nothing; drop their wrappers so they add no gap.
-      sx={{ "& > :empty": { display: "none" } }}
+      sx={{
+        // Hidden fields render nothing; drop their wrappers so they add no gap.
+        "& > :empty": { display: "none" },
+        // Material renderers disable the input but not its label.
+        "& .MuiFormControl-root:has(> .MuiInputBase-root.Mui-disabled) > .MuiInputLabel-root, & .MuiFormControlLabel-root:has(input:disabled) > .MuiFormControlLabel-label":
+          { color: "text.disabled" },
+      }}
     >
       {elements.map((child, index) => (
         <div key={`${path}-${index}`}>