Readonly inputs don't look like inputs

[w33ble]

This applies to search, text, number, textarea, and maybe others. Text input fields with the readOnly prop just look like text. They look odd in the docs:

But it looks especially odd when you try to actually use them in an application.

If it looked more like the disabled input, maybe with darker text and/or lighter background, it would fit a lot better.

[snide]

Read only inputs are mostly for displaying text content that matches the padding style of inputs so the spacing is correct (usually a label / input pair in a long form). We use it as substitute for regular text so that things match up.

Specifically we're trying not to signal editability. There's likely a standards argument to make here, but I can't think of a downside to using a disabled input in place of a read only one other than it reading disabled on a screenreader, which in its own way is still likely valid.

[snide]

@cchaos or @ryankeairns what do you think about this one?

[ryankeairns]

Digging into this a little bit, there are technical differences. The main difference being that readonly inputs are submitted while disabled are not. I don't think click events will fire on disabled events either, but do on readonly.

Given that, I think we may want to make the read-only style look more like an input box, perhaps a slight variation (?) on the disabled input style.

Likewise, I totally understand the need for labels that share the precise padding/sizing of form elements in order to obtain correct alignment. I don't see label styles called out directly in our EUI library, perhaps we need to add a separate section for those in conjunction with the re-styling of readonly inputs.

[w33ble]

Read only inputs are mostly for displaying text content that matches the padding style of inputs so the spacing is correct (usually a label / input pair in a long form). We use it as substitute for regular text so that things match up.

It doesn't sound like you're using input correctly then. If you want text, display it as text.

I think we may want to make the read-only style look more like an input box, perhaps a slight variation (?) on the disabled input style.

Yeah, read-only inputs still need to look like inputs. If you want an input that looks more like text, add a new input style prop or something. Overloading readonly here is problematic.