Select from a dropdown (or autocomplete) or add new item in same create / edit view

Question

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.

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.

https://react-select.com/creatable