18

Bootstrap supplies a class .uneditable-input, which can be applied to a span/label/text/etc to mimic the appearance of a disabled text input.

Bootstrap describes it as:

"Uneditable inputs: Present data in a form that's not editable without using actual form markup."

<span class="input-xlarge uneditable-input">Some value here</span>

I want to to use this in a few areas of my app where supplemental non-input data is side-by-side with editable input fields. My intention is to help maintain a neat, stackable form design. But I have a few hesitations I would like to get some UX feedback on...

Has there been any user testing done with this approach? Does it give a user the wrong impression of the data? Will the user be confused and react negatively? Normally, when there is a disabled text input, the user may think the field can be edited if they have different security, configuration, etc. But in this instance, the data is never editable-- it is only wrapped in a faux input field so that it can be presented neatly in a form.

I'd like to use this approach, but I haven't found any user research on this topic. Can anyone shed some light on this topic?

Improve this question
2
  • 1
    I think you're misinterpreting the Bootstrap docs. The uneditable input is intended for data which is not editable at the present time - perhaps because of permissions, time-sensitivity, etc. It is not there for layout neatness, although this will obviously work as it is similar dimensions to a regular input.
    – adam
    Mar 3, 2014 at 23:17
  • what version of bootstrap?
    – Sebastian Xawery Wiśniowiecki
    Jul 7, 2015 at 9:14

3 Answers 3

Reset to default
22

As a user, I will automatically think that a disabled text input field (or anything looks like this) means that the field is ultimately editable. Either the data that I supply on other fields makes it invalid for editing, or I have insufficient permissions to change the field's value.

Bootstrap CSS does have the form-control-static class that you can use to properly align truly read-only fields:

<div class="form-horizontal">
    <!-- Other fields not shown for brevity -->
    <div class="form-group">
        <label class="control-label col-md-2">Date</label>
        <div class="col-md-10 form-control-static">
            January 12, 1695
        </div>
    </div>
 </div>
Improve this answer
2
  • 1
    That's the right answer. If some data is read-only, don't use a disabled input. Bootstrap provides the form-control-static for exactly that purpose: styling read-only data when surrounded by editable input fields.
    – jgthms
    Mar 3, 2014 at 22:21
  • In v3 not working
    – Sebastian Xawery Wiśniowiecki
    Jul 7, 2015 at 9:14
4

Sometimes data is presented in a disabled input element because it is not editable but it is something the user will likely want to select and possibly copy-paste to somewhere else. Putting it in an input control makes it easily selectable but making it disabled makes it clear that the user should use exactly what is provided. Frequently this is the case with generated data (i.e. input your user name generates a URL to access your profile but it's not editable).

Improve this answer
4

Visually this is equal to setting an input field to disabled, so there is no difference there from a UI perspective. The difference is primarily technical, since a fake input field will not return any values to the server when the form is submitted, while a disabled input field will.

If the data is not editable under any circumstances I do not see the benefits of hinting that it might be.

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.