When designing a page for adding a new software project to a website, one of the information I want to ask is the project's license.

Since most projects will probably fall under a small set of possibilities (Freeware, GPL, BSD, etc), I want to suggest them as a 'clickable' choice and, if possible, display a small description of it, but the user should be free to insert anything he wants if none of the suggestions fit.

What's the best way to represent such field in a form?


One option is what is commonly referred to (in the non-web world at least) as a combo box. It looks like a drop down but you can type a value in the box if you want.

Here's a sample page that shows how they work: http://www.thunderguy.com/semicolon/resources/simpleCombo-demo.html

NOTE I wouldn't use this plugin in practice, because it defaults to a dropdown with javascript disabled instead of a text box (bad accessibility because you are limiting choices), but it gives you an idea of how the control looks.

All of the examples except the bottom two let you select from the dropdown or enter text yourself.

This is not the place to give you the technical solution on how to do this, but there are plugins for just about any web scripting frameworks (jQuery, MooTools, etc.) that can help you generate this. To get started, you can just search for "jquery combobox" in your preferred search engine provider (or whatever javascript framework you might be using).

Another option is to just use radio buttons with the small set of defaults and then just have an "other" radio button with a text box next to it. This is probably the easier and safer way to go, but does take up significantly more space. It does also allow you to have the short description that you mentioned would be a nice to have.

  • Yes, I was mostly looking for the UI concept - I'll write my own implementation if I can't find a decent library/plugin. Thank you for your answer. Jan 21 '11 at 20:35
  • 3
    I've looked at that example, but the problem is that it doesn't make it clear that the fields are editable - they're just like any regular dropdown. Do you have any suggestions about making it more obvious? Jan 21 '11 at 20:39
  • 1
    @André - yes, you can just use a textbox and when you click on it, the options drop down displays. More like an autocomplete, but with a set list of options. Jan 24 '11 at 16:58

Another term that might yield some results is "auto complete".

In Silverlight (for example) "combo box" is used for a control that only allows the user to select from a pre-defined list. There's no free text entry allowed.

However, while the auto-complete box allows completely free entry which would satisfy you last criterion it does require that the user type something into the box before the control will suggest anything. This means that they won't be presented with your short list of possibilities.

  • Autocomplete works completely differently. With autocomplete, you have to start typing and then you see options. It doesn't just display a fixed set of options for you. Like I commented in reply to André, Autocomplete provides a similar look, but the functionality is quite different. Jan 24 '11 at 16:59
  • @Charles - good point. I misread the question slightly.
    – ChrisF
    Jan 24 '11 at 17:04

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.