Read only form controls

A read only variant of Text input is suggested here: https://github.com/carbon-design-system/carbon-contribution/issues/13#issue-421692303

The “Disabled” option is not viable, as the label and entered data is not accessible. Proposal is to simply remove the line at the base of the “Filled” version of the component, so that it closely matches with the Disabled component, but passes accessibility.

Overview of component (updated May 13)

• Read-only variant will be keeping underline and dropping the background of the field. We need the underline for low-vision users to recognize this as a text field. Also loosing the underline makes the element a button-style, which would be confusing.
• Not moving the text position after all. Keeping text 16px away from left of border helps with preserving the form structure.
• Regular text cursor and allows text selecting
• Add not-editable icon, icon in PR https://github.com/carbon-design-system/carbon/pull/2710
• Optional tooltip when hovering not-editable icon, to provide reason for the field being read-only
• Overflow text in the field will show in tooltip on hover
• Should be considered a state, possible readonly attribute
• Follow the standard readonly attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly

Design spec (updated May 13)

In context explorations:

[tomlroach]

I suppose conceptually there doesn’t have to be any visual difference between an editable input and a read only input. They could be the same but editing is unavailable in a read only version.

For example this URL field in Typeform is not disabled, I can click into it, select the text etc. But I cannot edit it - it simply does nothing if I try to interact… That’s potentially an approach.

Luke shows another where he converts input fields into a similarly sized/shaped text component, although it’s limited to text inputs/dropdown, and I don’t quite see how it would be applied to radio buttons, checkboxes or other forms of input.

I would summarise the request as:

A point of view on how to represent settings which are not currently editable because they are in a read only state, in an easily legible format - i.e. without using disabled fields - which are extremely hard to read due to their styling.

[tomlroach]

+1 to this issue.

We have all sorts of user permissions in our product now, and would like to be able to show those users with viewer permissions the values of various fields without having to use disabled styling (and thereby making them hard to read).

One option would be we just design a read only version of every page which uses text elements instead of input fields, but replacing input fields with read-only versions would be much less work and would allow us to have the read only and editable versions of the pages match up.