In an intranet UI, when creating or editing a news post, the user is able to attach a file to the post.

This is done by selecting the file which can be found through either:

  • a file name search directly in the input field OR
  • through selection from a list displaying the contents of the upload folder OR
  • by uploading a new file

When editing the news post later on, the input field still displays the file name and allows for removal or replacement of the file attachment.

It is easy to find examples of search-as-you-type - the most obvious is of course Google Instant. However, a combination of search and input is harder to find - actually, I haven't found any good examples...

An initial (however, insufficient) mockup of the UI might look something like this:

Initial mockup of UI

The problem here is that users might interpret the dropdown button as a required part of the search process - even though, in reality, it's an alternative. We want to encourage the user to using the search-as-you-type over the select from folder feature, while preserving both options.

It probably wouldn't help much by placing the dropdown inside the input field like this:

The UI mockup with the dropdown inside box

Taking these things into consideration, my question is:

  • How to best design such an input field with embedded search?
  • to clarify: the attached file can either come from a common library stored on your servers for which the look-ahead function covers or from the local environment of the user?
    – colmcq
    Sep 12, 2011 at 13:01
  • The select file option covers files stored on the server. The upload file option enables the user to upload a file stored local on his/her computer to the server. The "look-ahead" only works on files on the server.
    – agib
    Sep 12, 2011 at 13:58

2 Answers 2


I would be inclined to keep them separate. They are different functions and the down arrow does not explain the distinct functionality very well.

Also: overlap between 'upload file' and 'select file', which one could argue amount to the same thing, namely, 'selecting a file to attach with a post'.

I would do this:

enter image description here

and even then you might want to play with the ordering of fields as it might be more likely that the local upload is the more common user behaviour.

Hope this helps and that I havent got hold of the wrong end of the stick!

edit: I've missed off the field submit to the right of the predictive field by accident


I would keep the two separate, but in the same group, because of the different location concepts the user has to grasp.

Mockup example:
mockup example

ux.stackexchange.com is also a good example of this separation of concepts:
ux stackexchange example

  • 1
    heh. I can safely say we have a consensus on this thread!
    – colmcq
    Sep 12, 2011 at 13:36
  • yeah, definitely, i just missed you for a few minutes. after i finished my answer i saw yours already here! :)
    – herkulano
    Sep 12, 2011 at 13:40
  • yeah, it's a very obvious answer tbh :)
    – colmcq
    Sep 12, 2011 at 13:46
  • i agree, again! ;)
    – herkulano
    Sep 12, 2011 at 13:56

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.