Dark mode: disabled input contrast

[andoyle]

Hey folks, I got some feedback from one of our users about the disabled input using dark mode: https://paste.twilio.design/components/input/#disabled-input

would it be possible to increase the contrast in dark mode for fields that are locked?
As you can see in the screenshot, it’s quite hard to read currently.

I'll share the screenshot in Slack.

I tend to agree with them, it does seem hard to read.

[shleewhite]

Hi @andoyle,

If users are meant to read but not interact with an input, we generally advise not using the disabled prop because disabled inputs are meant to be low contrast. If they are higher contrast, people believe they can interact with them or that they are submitted with the form.

Instead, you could use the readOnly prop which maintains high contrast but prevents users from typing or using Text or Paragraph component to just display the field label and content as normal text. We have a note about this on the Input docs: https://paste.twilio.design/components/input/#disabled-input.

Please let us know if you have more questions!

[andoyle]

Thanks @shleewhite Yeah, we generally display the field text as normal so I'll look at this use case again.

Understand not wanting users to think they can interact with the disabled field. Just think in the dark mode, it's much harder to read than light mode.

https://paste.twilio.design/components/input/#read-only-input would make me think I can interact with it. Wonder if there's been any feedback on that before?

[shleewhite]

That is totally fair feedback, the best option then seems to be using static text. I can share a screenshot of what it could look like in Slack.