How to indicate field is locked and contains auto-generated value?

Question

How can I emphasize that the value in a field is auto generated and not editable?

• User must see the generated code.
• User must understand that the code is generated as per above fields completed

Design 1:

Design 2:

Design 3:

Design 4:

Design 5:

Answer 1

Assuming there is a need for the code to be within a text field (eg, to facilitate copy/paste), Design 3 with the lock icon would be fine. (Design 5 looks like a variation with some added color, which could be helpful.)

Design 4 might make it too easy to ignore the code, which would be fine if it is entirely unimportant.

Other suggestions to consider:

• Change the name of the field from "Code" to "Code (autogenerated)".

• When the mouse cursor hovers over the field, its name, or the lock icon, show a tooltip that explains the purpose of the field and why it isn't editable.

• If there is a scenario in which the user might need to enter the code directly, you could allow the user to unlock the field by clicking the lock icon. (In this case, you could change the icon to a checkbox labeled "autogenerate".)

Answer 2

Best practise would be to make the code a string rather then an input field. This makes it very clear for the user that this is not something they can edit.

I would make it look something along the lines of this assuming the code is not extremely important to the user:

And with the name input disabled:

If you really need to make it an input field I would use standard practises and make it a disabled input (this means you cant do anything with it, but still shows the value):

Answer 3

You can adopt either of the approaches in your design 1 or design 4.
Design 1 - This pattern i.e, showing disabled textbox with prefilled text is used when it is enabled to a different users / different usecase. This pattern inform user that it is only disabled for his role and previledges.

Design 2 - This pattern is used when an autogeneration of a serial number / code number like part number/ hall ticket numbers, etc. for user's reference. In this case there is no provision of editing it. It is auto generated by the system as a reference number.

Answer 4

To echo the things already stated in the comments by Mike Mark and Tomm:

If it's not editable then don't put it in an editable text field. Just display it as regular text. But, if it's of no use to the user, don't show it at all.