Creating a tag selector component similar to email applications

Other Questions Gmail
1

I’m trying to build a tag selection interface that works like the one in popular email clients. I need users to be able to pick from existing tags or create new ones. The component should have these features:

  1. Users can click on any tag from a dropdown list to apply it right away.
  2. Multiple tags can be selected at once using checkboxes and then applied together.
  3. A search box that filters the available tags as you type.
  4. When the filter shows only one result, pressing enter should select that tag.
  5. The entire widget should open when pressing a specific key like ‘T’.

Are there any JavaScript frameworks or libraries that already have this kind of widget built in? I’m looking for something that handles the dropdown behavior, filtering, and keyboard shortcuts without having to code everything from scratch.

2

I built something like this 6 months ago with React Select plus some custom code. React Select handles the dropdown, filtering, and multi-select stuff you need. The keyboard shortcuts took extra work though - had to add event listeners to catch the ‘T’ key and focus the component. For the enter-to-select feature, I customized React Select’s onKeyDown to check if there’s only one option left after filtering. Took about 3 days total and it’s been solid in production. If you’re not on React, check out Choices.js - does similar things with vanilla JS.

3

I’ve used Select2 for jQuery projects and it handles most of what you need. Tagging’s built-in - lets you pick existing options or create new ones. Search filtering works great, and you can set it to auto-select when there’s only one result left. The global keyboard shortcut isn’t included though, so you’ll have to add that yourself with document event listeners. You might also want to check out Tagify - it’s built specifically for tag inputs and gives you way more control over how it looks. Both have solid docs and active communities if you get stuck.

4

vue-multiselect worked perfectly for me on a similar project. Handles all the dropdown logic and filtering you mentioned, plus multi-select with checkboxes is built right in. Only had to add the global ‘T’ key listener but that’s just a few lines. Way easier than building from scratch.