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?

  • 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 '14 at 23:17
  • what version of bootstrap? – Xawery Wiśniowiecki Jul 7 '15 at 9:14
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>
  • 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 '14 at 22:21
  • In v3 not working – Xawery Wiśniowiecki Jul 7 '15 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).

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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