Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Have you looked at the datalist element? dev.opera.com/articles/view/new-form-features-in-html5/… –  cimmanon Apr 19 at 12:50
add comment

3 Answers 3

Here's a solution I've used before:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

share|improve this answer
    
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 Mar 24 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 Apr 14 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 Apr 14 at 18:28
add comment

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).

share|improve this answer
    
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 Mar 24 at 1:14
add comment

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...

share|improve this answer
    
When "Add category" is pressed, a new text field appears? –  slothbear Apr 14 at 17:42
    
@ Slothbear .. exactly. See it here: jsbin.com/vuwehifu/1/edit?html,css,js,output –  Shina Apr 15 at 8:43
    
Oh. oh! That's clever. Thanks for the jsbin. I need to try this out in my project. many thanks. –  slothbear Apr 15 at 19:58
    
Alright, let me know if you need help. Please consider accepting my answer if it was helpful. –  Shina Apr 16 at 6:08
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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