Create Filterable Tags Input UI with outside-tags-selector

outside-tags-selector is a tiny JavaScript library that transforms a standard text input into a filterable tag selector.

This tags input library focuses on selecting from predefined tag values rather than creating new ones. This makes it ideal for category selection, filtering systems, or any interface where you need controlled tag selection.

Features:

• Real-time filtering of available tags
• Automatic hidden input value management with configurable delimiters
• Customizable CSS classes for styling flexibility
• Mobile-friendly interface with touch support
• Minimal footprint with no external dependencies

How to use it:

1. Download tag-selector.min.css and tag-selector.min.js files and link them in your HTML document:

<link rel="stylesheet" href="tag-selector.min.css">
<script src="tag-selector.min.js"></script>

2. Create an input field inside the tags input UI.

<div class="tags">
  <input type="text" id="input" placeholder="Go!" />
</div>

3. Initialize the tag selector with your predefined tags:

TagSelector.render('input', {
  tags: [
    {name: 'JavaScript', value: 'javascript'},
    {name: 'CSS/CSS3', value: 'css'},
    {name: 'HTML5/XML', value: 'html'},
    {name: 'React.js', value: 'react'},
    {name: 'Vue.js', value: 'vue'},
  ]
});

4. Available options.

• tags: (Array, Required) Your list of tag objects {name: string, value: string}.
• placeholder: (String, Optional) Placeholder text for the filter input. Default: 'Type to filter...'.
• delimiter: (String, Optional) Character used to separate values in the hidden input. Default: ,.
• inputClass: (String, Optional) Custom CSS class for the main container (.is-tag-selector-container).
• tagClass: (String, Optional) Custom CSS class for individual tag elements (.is-tag-selector-tag).
• tagContainerClass: (String, Optional) Custom CSS c

tagSelector.render('input', {
  placeholder: 'Type to filter...',
  delimiter: ',',
  inputClass: '',
  tagClass: '',
  tagContainerClass: '',
});

Comparison with Alternatives

vs. Select2/Chosen: While these popular dropdown replacements offer tag selection among many other features, outside-tags-selector is much lighter and focused exclusively on tag selection from predefined options. If you need just this specific functionality, outside-tags-selector will have a smaller footprint and simpler implementation.

vs. Tagify: Tagify is more feature-rich and allows for creating new tags on the fly. If you need users to be able to add their own tags, Tagify would be the better choice. However, if you specifically want to restrict users to predefined tags, outside-tags-selector is more targeted to that use case and has fewer configuration options to worry about.

Changelog:

07/18/2025

• Update tag selector component to initialize with default values and improve tag management