3

I'd like to create a dropdown list control in a form that allows users to either select a value from the list, or type a new value. Typing a new value and saving the form will result in that new value being added to the list for future use. I realize this may not be the standard UX for a dropdown control, so what is a good way to visually differentiate to users the difference between picking an existing value and typing a completely new value? We'd like them to easily understand when they are adding a new value to the list instead of using an existing one.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

2
  • 1
    If I'm not mistaken, this is where "combo-box" got it's name; it's a combo of a list box and a text box. You can select from available options like a list box or you can type something new like a text box. If you're kickin it olde skool and coding some VB, it was one of the intrinsic controls msdn.microsoft.com/en-us/library/aa242120%28v=vs.60%29.aspx but I think it's more common practice to have an "other" option in your list and then a separate comments text box that becomes active/required when you choose the "other" option. Jul 3, 2013 at 1:21
  • I realize now that I shouldn't have interchanged the words combo-box and dropdown. What I really had wanted to ask was specifically for combo-box. But I won't change the question at this point.
    – Otter
    Jul 3, 2013 at 13:20

2 Answers 2

4

Simple and a bit old-stylish implementation, but it requires minimum javascript and uses standard input elements. Elements with blue border are autofocused.
enter image description here

Enter manually option is at the bottom of the list, i.e. user chooses it only after browsing all other options. Then using javascript input field below gets focus.

3
  • 1
    One thing to watch out for is if you are allowing users to add new options that will then be saved to the list for future use, you might end up with a list that has Cheeseburger, Cheesburgers, and Cheeseburgerz. Jul 3, 2013 at 1:24
  • Choose task takes less effort than typing one, so laziness should win. Although it's always a bit risky to give power to users. Jul 3, 2013 at 3:09
  • the level of effort involved in choosing depends on the number of options in the list. If there are 3 items in the list, you might be right; it takes minimal effort to select, but if there are 20,000 items in the list, you need to sift through a lot of junk to see if the one you're looking for is there, so it will be easier to just type it. Also, it depends whether your users are mouse people or keyboard people (or if it's a mobile app, finger people). Jul 3, 2013 at 21:08
2

What you are looking for is something like what we do in 'tag' fields. You show the available options, but can create new tags there itself.

Basically, treat it as an input box (remove the drop-down), and show the available options as a contextual search.

enter image description here

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.