Read-only text block for forms

[kirill-konshin]

Quite frequently there's a need to display some value in the form, it could be achieved by making an input read only (there was a proposal to add read-only prop for TextField: #9790), but it would still have the underline, also, the presented text can have formatting, links, images, etc., which is impossible to do with input.

So far I used the following code as temp solution:

import {styles as inputBaseStyles} from '@material-ui/core/InputBase/InputBase';

const ReadOnly = withStyles(inputBaseStyles)(({children, classes, className, ...props}) => (
    <div className={cx(classes.root, className)} {...props}>
        <div className={classes.input}>{children}</div>
    </div>
));

So that it could be used as follows:

<FormControl>
    <InputLabel shrink>Label</InputLabel>
    <ReadOnly>Foo</ReadOnly>
</FormControl>

Does it make sense to add such component to the lib? Is it safe to use default styles like this?

PS. There is a special class in bootstrap for such case: http://getbootstrap.com/docs/4.1/components/forms/#readonly-plain-text

[kirill-konshin]

Ping

[vileppanen]

I'm not sure if I get this right:
You want to display read-only text field, with the Material styling?

Or you want to "display anything you want" but styled as if it was a Material styled text field?

[eps1lon]

@kirill-konshin What was #9790 (comment) lacking?

Displaying an image in TextField would be a different issue. Do you mean something like adornments? Could you showcase such a use case?.

[kirill-konshin]

I was not talking about adornments, I was looking for something that allows to display any content with an input label on top. The implementation that I've supplied to this ticket does exactly this.

[eps1lon]

But that's not really an input not even mentioning a textfield. It's just a generic container with a label. I was interested in a specific use case that relates to input provided by the user.

[kirill-konshin]

Case 1. Read-only phrase with edit button
Case 2. Custom control like an MP3 player
Case 3. A checkbox or set of checkboxes or radios under common label

[kirill-konshin]

Looks like this :)

[eps1lon]

Case 1. Read-only phrase with edit button

Sounds like #9790 (comment) would solve this. What is missing?

Case 2. Custom control like an MP3 player

That's very specific use case where an input is not the appropriate abstraction

Case 3. A checkbox or set of checkboxes or radios under common label

This should be covered by https://material-ui.com/demos/selection-controls/#radio-buttons

I feel like your example is perfectly fine. It's a generic container with a label.

[kirill-konshin]

#9790 (comment) can only have text, no hyperlinks, no images, no custom tags, so this does not work.

Fieldset+legend (https://material-ui.com/demos/selection-controls/#radio-buttons) could be an option as a generic container with a label, but it has different visual style than a textfield's label, that's my main concern...

[kirill-konshin]

https://codesandbox.io/s/l7vykxl57q

[kirill-konshin]

Actually, this issue is coupled with #13643, forgot to mention that )

[kirill-konshin]

Sorry for confusion.

This particular ticket is only about the ReadOnly container that looks like a read-only Input but can have rich formatting, not just text.

The container discussion is a separate ticket: #13643.

[oliviertassinari]

This seems to be a duplicate of #9790. The readOnly prop is supposed to cover this problem.

[kirill-konshin]

No, readOnly prop just makes field to become read only, it does not allow to have HTML markup in the block. I commented about that earlier in this thread:

#9790 (comment) can only have text, no hyperlinks, no images, no custom tags, so this does not work.