Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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)

share|improve this question
    
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 '13 at 21:52

3 Answers 3

up vote 4 down vote accepted

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

http://getbootstrap.com/css/#forms

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.

share|improve this answer

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.

//Pic

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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