How should an input field appear when it is disabled? One idea is to show 'Disabled' as value within the input field. Is there a better idea to indicate an input text field is disabled?

The input box needs to be disabled until a check box is checked(checkbox for terms of service)

  • Why are you wanting to do so? If it's an input field then the purpose of it is for inputting data. Can you provide more information about this situation so we can understand the actual issue so we can give a more accurate and useful answer?
    – JonW
    Oct 15, 2013 at 21:52

3 Answers 3


I'm actually a fan of how bootstrap does their disabled input field.


They even have it set where the mouse arrow changes on hover for added clarification.

enter image description here

However, using it is another matter. Sometimes, not showing something until it's available may be a better solution. Perhaps you should explain better in detail on what you're trying to accomplish.


The most important clue to provide is a dimmed label for the input field (in addition to, obviously, dimming any default text in the field).

enter image description here

This only works for labels placed (properly) outside the field. A dimmed label or prompt in the field could simply mean “this is not really input.”

You can also try graying the background of the field, changing it to a white background when it becomes editable.


This works best for classic GUI dialog boxes where the window background is the same shade of gray (as in the example above). You want a disabled field to be noticeable but not attract attention relative to enabled controls, like your checkbox. However, a gray field on a white background (as often used in web apps) has strong contrast which tends to attract attention.

You can try “disabled” as a value, but that’s jargon –your users may not know what it means (“No, my email works fine”). You could try a more directive prompt, like “Accept terms of service first.” That's good self-documentation, but adds clutter that, ironically, attracts attention away from where the user should look first (the terms of service and checkbox). If the dimming of the label works for most users, maybe you could present such a prompt only for users that try to put focus on the field.


Showing an input field that is disabled for input means that it is now serving another purpose, usually an informational or learning purpose, at which point it should be optimized for that purpose. If it isn't then remove it as it adds unnecessarily to cognitive load and interface complexity.

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.