I've always run into this conundrum: How to give the user a long list of options and allowing them to populate their own if it doesn't exist.

I usually handle this interface by giving an autocomplete list for a textbox, then if they select one, mark a variable that it's existing (kind of like the "Tags" box on here). If it isn't from the list, then I add new. I've also had radio buttons auto-tick or be user-ticked based on "Add", "Edit", and "Select" options.

I've never really loved the above approach, and I was wondering if there was a cleaner better approach to giving the user an option to use an existing or add a new value.

  • Please check if "To email address" section displayed on gmail when we draft email suits you. Aug 27, 2019 at 17:14
  • Isn't this a case of tackling the how rather than the why? Aug 28, 2019 at 7:48

1 Answer 1


Here’s a good working example of an integrated “creatable” select list with Jed Watson’s react-select component.

You can select from an existing set of options, search them with autocomplete. If you type an entry that does not already exists, it prepends the word “Create “ to whatever the user types, informing them that the entry will be added as a new option going forward.


enter image description hereenter image description here

  • I like that. It's a nice, clean solution that isn't too intrusive. It also lets them know they're adding a new item. Sep 4, 2019 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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