3

I have three states of the text field in my design. One is the normal input field, one is when they have input the no. and the next state is when the number is locked as in users cannot change the input field once they enter here.

How do I differentiate the three states of the text field through colors. Our design system has text fields with a slight grey tinge so how do I represent the locked text field enter image description here

Improve this question
1
  • 2
    Does the locked field have to look like an input field, given users can't modify? This might avoid the potential confusion of looking like an input field but not allowing to actually modify...
    – greenforest
    Apr 19 at 11:39

2 Answers 2

Reset to default
5

If your text becomes read-only, then give it the coloring of read-only text. In your case, that's near-black text on a white background, such as you use for your labels. No shading and no border.

Lock text in same style as read-only labels

I have found that any adornment of a read-only field with borders, colors, or such can lead some users to think it might be editable.

There are some benefits to visually distinguishing fields from labels, but to users they don't have a big functional difference. Read-only fields and labels (and headings and instructions) are all just stuff to read and not otherwise interact with, as far as users are concerned. It may be sufficient to separate the label from the field with a colon, as I've done above, so users recognize the text below as a field entry. You can also try different font (e.g., serif font for fields), although that's a little arbitrary.

Don't make the locked field look "disabled" even if that may be programmatically easier; that is, don't use light gray text on your slightly gray background. That encourages users to skip over the field, like it's irrelevant. It'll also probably fail W3C accessibility standards.

Improve this answer
3
  • This. Maybe also add a padlock icon, if there's any reason that an (experienced?) user might expect that it ought to be editable, to indicate that "this is by design".
    – nigel222
    Apr 20 at 9:13
  • @nigel Yes, especially if clicking or hovering over the padlock provides instructions or a means (a password?) to unlock the field, or at least an explanation.
    – Michael Zuschlag
    Apr 20 at 14:34
  • Of course, what you really want is something explicitly saying the field can't be changed after entering (if that's what happens), so the user is careful with what they put in there in the first place. But that's another question.
    – Michael Zuschlag
    Apr 20 at 14:36
2

I suggest using the same style as in Materal 2.0. https://m2.material.io/components/text-fields#outlined-text-field:~:text=domain%20address%20suffix-,States,-Outlined%20text%20field Now it's too hard to visually separate what state each of the designs is in. Try to play more with style and writing.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.