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 https://github.com/mui-org/material-ui/issues/9790#issuecomment-356193517 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 https://github.com/mui-org/material-ui/issues/9790#issuecomment-356193517 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]

https://github.com/mui-org/material-ui/issues/9790#issuecomment-356193517 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 https://github.com/mui-org/material-ui/issues/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.