At the moment, JSON Forms does not differentiate between readonly and disabled controls.
Renderers only receive information about whether a control is enabled or not, which means readOnly: true fields from the JSON Schema are effectively treated as disabled.
This causes a problem for renderer integrations like Vuetify (and likely others). In Vuetify, a disabled field appears gray and inactive, while a readonly field stays visually active but cannot be changed — a much better representation for non-editable but still relevant data.
The distinction between readonly and disabled is important not only for styling but also for semantics and accessibility:
-
readonly→ visible, interactive in appearance, but not editable -
disabled→ unavailable, excluded from form interaction
Currently, renderers cannot reflect this difference because the core simply exposes an “enabled” flag.
It would be ideal if the core framework exposed both:
-
whether the control is enabled/disabled, and
-
whether the control is readonly (based on JSON Schema’s
readOnlykeyword and others).
That way, all renderers (Vuetify, Material, etc.) could properly represent readonly fields according to their design systems — without each renderer having to reinvent its own detection logic.
This feels like something that should be supported at the core level, since the concept of readOnly comes directly from JSON Schema and others, and should be part of the base control state model.
For backward compatibility we can still make the enabled to be false when the readonly is true but that should be more like an option that can be changed in order to support the new concept.
