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:


  • 3
    Does it have to be in a field when not editable?
    – Mike Mark
    Commented May 21, 2019 at 9:29
  • Does the user need to see the code if its auto generated anyways? seems like unneccesary information to the user
    – Tom
    Commented May 21, 2019 at 9:30
  • Do you need to indicate somehow that it has been autogenerated? Is that a requirement?
    – Mike M
    Commented May 21, 2019 at 11:19
  • Yes user need to see the information. Actually the code is generated based on certain logic as per Attributes selected above.
    – LeGaulois
    Commented May 21, 2019 at 12:09
  • @Tomm Yes, he need to see the field and also understand that it's auto generated
    – LeGaulois
    Commented May 21, 2019 at 12:12

4 Answers 4


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".)


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:

name input open

And with the name input disabled:

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):

enter image description here


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.


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.

  • If we have already stated it in the comments, why upload it as an answer. This provides no extra value. Rather then a hope for rep in my eyes
    – Tom
    Commented May 21, 2019 at 10:36
  • Yes, you kinda right but if i just display as plain text, I'm affraid that user doesn't understand that the code is generated based on attribute selected above that code.
    – LeGaulois
    Commented May 21, 2019 at 12:10
  • @Tomm (sorry I haven't been visiting here very often) I wasn't hoping for 'rep', just trying to point out that answers had already been given by yourself and Mike and to draw them together into one place. It's clear that someone didn't like the answer so I don't think I gained anything here. Your comment had value; you should have more faith in yourself and post answers where you see them. You can always write answers based on assumed conditions. Commented Jun 12, 2019 at 12:34

Your Answer

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

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