My web application has a half dozen fields where the user is allowed to select from a list of existing values – or enter a new one.

Initially, I included an option called "Other…". When chosen, a new field would slide in, allowing the user to enter a new value. That worked ok with one field, though it felt a little clunky. Now I want to use the same technique for 6 fields, and it's getting harder to manage all the extra "Other…" fields, plus all the extra programming for managing the Other Values.

For a while now, I've been using the Koenpunt fork of the Chosen library, which allows the user to enter new values in the same field. That works ok in general. But recently, I've wanted to add some validation – either via the HTML5 required attribute, or the jQuery Validation library. Since Chosen hides the original SELECT field, the error messages either don't show up, or show up in the wrong places. I've used some of the workarounds, but I feel like I'm applying patches to patches to patches. You can see both the Other… and the Chosen methods in action in my test app: http://chosen-modality.herokuapp.com/

It seems like this pattern isn't all that strange, but I haven't seen any examples in other apps – and I've been keeping an eye out for over a year. Any ideas on a good way to handle this select-or-add capability?


3 Answers 3


I like how WordPress provides an easy access to a list of already used categories, but also makes it possible to quickly add a new one:

enter image description here

(The "+Ajouter une période" button actually toggles the form right below).

  • I like the way the +Add link is separate – not like the "Other" choice I had in the drop-down. Would this look cluttered if used 6 or 8 times on the same form?
    – slothbear
    Commented Mar 24, 2014 at 1:14

Here's a solution I've used before:


download bmml source – Wireframes created with Balsamiq Mockups

In this case, this allows the user to add and remove items.

  • The "add new" field works as both an input field and a search? Or is that a standard SELECT? That might work. Some of my fields are single-value, some multi-value.
    – slothbear
    Commented Mar 24, 2014 at 1:16
  • @slothbear the "add new" field we've implemented is a predictive search function because our list selection is so long (over 200+). you could change it to a drop-down if you have less items. This solution also visually translates to mobile as well due to its vertical layout.
    – Pdxd
    Commented Apr 14, 2014 at 18:27
  • @slothbear You could also change it to be an input field, if the items can't be found in the predictive search. Or chuck the predictive search entirely, but then you leave it open to any number of options and spelling variation additions.
    – Pdxd
    Commented Apr 14, 2014 at 18:28

Very good question, I had the same request from one of my clients and what I actually did was that I created a toggle button beneath the select option to create a new category (text) or revert back in-case they change their mind :)

Add category toggle button

During the toggle, I had to make some changes to the name attribute e.t.c.

My client loves it...

  • When "Add category" is pressed, a new text field appears?
    – slothbear
    Commented Apr 14, 2014 at 17:42
  • @ Slothbear .. exactly. See it here: jsbin.com/vuwehifu/1/edit?html,css,js,output
    – Shina
    Commented Apr 15, 2014 at 8:43
  • Oh. oh! That's clever. Thanks for the jsbin. I need to try this out in my project. many thanks.
    – slothbear
    Commented Apr 15, 2014 at 19:58

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.